@charset "utf-8";
/*
 Share Style 
----------------------------------------------------------- */
* {margin:0; padding:0;}
body {color:#333; background:#F6F5F5; font-size:14px;}
html {overflow-y:scroll;}
div#container{text-align:center;}
section{margin:auto;}

header{display:flex; justify-content:flex-start; align-items:center; height:76px; background: #21242F; color:#FFF; padding-left:20px;}
header a{display:block; width:205px; height:60px; text-decoration:none; font-size:0;
background-image: url(/common/img/logo/ricksoft/Ricksoft_w.svg);
background-size:164px 37px;
background-repeat:no-repeat;
background-position:0 12px;}
@media screen and (max-width: 800px) {
    header{flex-wrap: wrap; justify-content:flex-start; height:auto; padding-bottom: 10px;}
    header p{width:100%; text-align: left; margin:5px 0; font-size:0.8em;}
    header a{width:100%; height:40px; background-size:120px auto;}
}

footer{background: #21242F; color:#FFF; padding: 30px 0;}

small{font-size: 1em;}

/* 線あり */
h2{width:60%; width:600px; margin: 1.0em auto; position:relative; text-align:center; color:#222; font-size:2.2em; letter-spacing:1px;}
h2:before{content:''; position:absolute; top:calc(50% - 1px); left:0; width:100%; height:1px; background:#222;}
h2 span{position:relative; padding:0 1em; letter-spacing: 4px; background-color:#F6F5F5; display:inline-block;}
@media screen and (max-width: 800px) {
	h2{width:auto; padding:0 10%; margin:20px; font-size:1.90em;}
}
/* 線なし */
h2.no-line{width:100%;}
h2.no-line:before{height:0px;}
h2.no-line span{position:relative; padding:0; letter-spacing: 4px; background-color:none; display:inline-block;}
@media screen and (max-width: 800px) {
	h2.no-line{width:auto; padding:0; margin:auto; font-size:1.90em;}
}

section.cover_wrap{background-color: #fff; box-shadow: 0 8px 24px rgb(0 0 0 / 8%);}
section.cover_wrap #cover{position:relative; padding-top: 30px;}
section.cover_wrap #cover #eye_catching div:nth-child(1) img{margin-bottom:20px;}
section.cover_wrap #cover #eye_catching div:nth-child(1) dl{border:1px solid #aaa; background-color:#fcfcfc; padding:10px 20px; border-radius:6px; margin:10px 0 20px;}
section.cover_wrap #cover #eye_catching div:nth-child(1) dl dt{font-weight:bold; font-size:1.16em;}
section.cover_wrap #cover #eye_catching div:nth-child(1) dl dd{text-indent:-1em; padding-left:1em; text-align:left;}	
section.cover_wrap #cover #eye_catching div:nth-child(2) img{width:100%; }

@media (min-width: 800px) {
	section.cover_wrap #cover h1 small{display:block; margin-bottom:10px; font-size:0.80em; line-height:100%;}
	section.cover_wrap #cover #eye_catching{width:1050px; margin:auto; display:flex; justify-content:center; position:relative;  left:50px;}
	section.cover_wrap #cover #eye_catching div:nth-child(1){width:50%; padding:30px 0; text-align:left; letter-spacing:0.06em; z-index:2;}
	section.cover_wrap #cover #eye_catching div:nth-child(1) h1{font-size:2.00em; font-stretch : ultra-condensed; line-height:140%;}
	section.cover_wrap #cover #eye_catching div:nth-child(1) p{font-size:1.08em; font-weight:400; color:#333; }
	section.cover_wrap #cover #eye_catching div:nth-child(2){width:50%; padding:0; z-index:1; display:flex; align-items:center;}
	section.cover_wrap #cover #eye_catching div:nth-child(2) img{width:100%; position:relative; left:0px; top:0px; }
}

@media (max-width: 1600px) {
    section.cover_wrap #cover #eye_catching div:nth-child(2) img{width:100%; height: auto; position:relative; left:0px; top:0px; }
}

@media (max-width: 800px) {
    section.cover_wrap #cover{padding-top: 20px;}
    section.cover_wrap #cover #eye_catching{padding:20px;}
    section.cover_wrap #cover #eye_catching div:nth-child(1) h1{line-height:140%; margin-bottom:10px;}
    section.cover_wrap #cover #eye_catching div:nth-child(1) p{text-align:left;}
    section.cover_wrap #cover #eye_catching div:nth-child(1) p.guide{text-align:center;}
}

/*  表示位置の調整分 */
section.cover_wrap{padding-bottom:100px;}

/*  開催概要 */
#schedule_area{text-align:center; position:relative; top:-100px;}
#schedule{z-index: 999; width:1000px; background-color: #7cc5b6; border-radius:4px; margin: auto; padding: 10px 0;}
@media (max-width: 1100px) {
	#schedule{z-index: 999; width:90%;}
}

#schedule h2{width:50%; margin: 1.0em auto; position:relative; text-align:center; color:#222; font-size:2.2em; letter-spacing:1px;}
#schedule h2:before{content:''; position:absolute; top:calc(50% - 1px); left:0; width:100%; height:1px; background:#FFF;}
#schedule h2 span{position:relative; padding:0 1em; letter-spacing: 4px; background-color:#7cc5b6; display:inline-block;}
#schedule h2 i{color:#FFF;}
#schedule h3{font-size:2.0em; line-height:120%; margin-bottom: 50px;}

#schedule a{color: #004ea2; text-decoration: none;}
#schedule a:hover{text-decoration:underline}

#schedule a.btn_contact{color: #fff !important;}
#schedule a.btn_contact:hover{text-decoration:none}
#schedule a.btn_contact:visited{color: #fff !important;}

@media screen and (max-width: 800px) {
	#schedule h2{width:auto; padding:0 10%; margin:20px;}
	#schedule h3{font-size:1.8em; line-height:120%; margin: 0 20px 50px;}
}

#schedule dl{display:flex; flex-wrap: wrap; width: 80%; margin: 20px auto; font-weight:bold; }
#schedule dl dt{width:200px; height: 32px; background-color: #FFF; color:#27B89A; font-size: 1.2em; margin-bottom: 30px;
display:flex; justify-content:center; align-items: center;}
#schedule dl dd{width: calc(100% - 220px); text-align: left; padding: 6px 0 0 20px; font-size: 1.2em; margin-bottom: 30px;}

#schedule dl .large{font-size: 160%;}

#schedule dl small{font-size: 0.8em;}
@media screen and (max-width: 800px) {
	#schedule dl dt{width:100%; margin-bottom: 20px;}
	#schedule dl dd{width:100%; text-align:center; padding: 6px 0 0 0;}
}

/*  プログラム */
#program{width: 800px; margin: auto auto 120px;}
#program h3{font-size:2.0em; line-height:120%; margin: 50px auto 20px;}
#program p{font-size: 1.16em; line-height: 180%;}
#program p.guide{display: inline-block; width: auto; margin: auto;}
#program dl{font-size: 1.18em; line-height: 180%; color: #27B89A; margin: 20px 0 40px; font-weight: bold;}
@media screen and (max-width: 800px) {
	#program{width: 90%;}
	#program h3{font-size:1.8em; line-height:120%; margin:20px 0 30px;}
	#program p{font-size: 1.0em; line-height: 180%;}
}

/* アジェンダ */
#agenda{width: 800px; margin: auto auto 100px;}
#agenda h3,
#agenda b{font-size:1.3em; line-height:160%; margin: auto auto 20px;}
#agenda table{width:100%; border-collapse: collapse;}
#agenda table th,#agenda table td{border:1px solid #aaa; padding: 20px; }
#agenda table th{background-color: #f5f5f5; width: 15%;}
#agenda table td{background-color: #FFF; width: 85%; text-align: left;}
#agenda table td dl dt{font-size:1.2em; line-height:160%; margin: auto auto 16px;}
#agenda table td dl dd p{font-size:1.0em; line-height:200%;}
@media screen and (max-width: 800px) {
	#agenda{width: 90%;}
	#agenda h3,
	#agenda b{font-size:1.2em; line-height:160%; margin: auto auto 20px;}
}

/* 登壇者紹介 */
#speakers{width: 1000px; margin: auto auto 100px;}
#speakers ul{width:100%; display:flex; justify-content:space-around; flex-wrap: wrap; list-style: none;}
#speakers ul li{margin-bottom:50px; width:55%;}
#speakers ul.type_1 li{width:55%;}
#speakers ul.type_2 li{width:40%;}
#speakers ul.type_3 li{width:30%;}
#speakers ul li img,
#speakers ul li h3,
#speakers ul li p{margin-bottom: 20px;}
@media screen and (max-width: 800px) {
	#speakers{width: 100%;}
	#speakers ul li{width:80%;}
	#speakers ul.type_1 li{width:80%;}
	#speakers ul.type_2 li{width:80%;}
	#speakers ul.type_3 li{width:80%;}
}
@media screen and (max-width: 800px) {
	#speakers h2{width:auto; padding:0 10%; margin:20px 40px;}
}

/* ご案内 */
#info-detail{width: 800px; margin: auto auto 100px;}
#info-detail p{font-size: 1.16em; line-height: 180%; margin-bottom: 20px;}
@media screen and (max-width: 800px) {
	#info-detail {width: 100%;}
	#info-detail p{width: 90%; margin: auto;}
}
@media screen and (max-width: 800px) {
	#info-detail h2{width:auto; padding:0 10%; margin:20px 40px;}
}


/* button(lps_layout.cssのクラスを元に調整)
------------------------------------------ */
.btn {position: relative; overflow: hidden; display: inline-block; border-radius: 4px;
transition: all 0.2s ease; -moz-transition: all 0.2s ease; -webkit-transition: all 0.2s ease; -ms-transition: all 0.2s ease;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .2); box-shadow: 0 0 10px rgba(0, 0, 0, .2);}
.btn > * {
color: #fff !important; font-size: 18px; letter-spacing: 1px; text-decoration: none; position: relative;
display: flex; justify-content: center; align-items: center; padding: 10px;
border: 1px solid #fff; -webkit-box-sizing: border-box; box-sizing: border-box;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .2); box-shadow: 0 0 10px rgba(0, 0, 0, .2);}
.btn > *:before{content: ""; display: block; }
.btn > *:after {content: ""; display: block; }
.btn > *:before, .btn > *:after {
position: absolute; width: 0; height: 0;
transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease;
transition-delay: 0.1s; -moz-transition-delay: 0.1s; -webkit-transition-delay: 0.1s; -o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s; opacity: 0;}
.btn > *:before {left: -1px; top: -1px; border-left: 1px solid #fff; border-top: 1px solid #fff; }
.btn > *:after {right: -1px; bottom: -1px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; }
.btn_center {width: 240px; margin: 0 auto;}
.btn.center {margin-left: auto; margin-right: auto;}
.btn:hover > * {border-color: transparent;}
.btn:hover > *:before, .btn:hover > *:after {
opacity: 1; width: 96%; width: calc(100% + 2px); height: 96%; height: calc(100% + 2px);}
@media only screen and (max-width: 800px) {
    main .btn {width: auto !important; }
    .btn > * {font-size: 14px !important;　width: auto;}
}
.btn.blue > * {background-color: #3E6BC5; border: 1px solid #3E6BC5; font-weight: 400;}
.btn.blue > a:hover {background-color: #34589e; border: 1px solid #34589e !important;}
.btn.green > * {background-color: #27B89A; border: 1px solid #27B89A; font-weight: 400;}
.btn.green > a:hover {background-color: #1b826d; border: 1px solid #1b826d !important;}
.btn.purple > * {background-color: #702963; border: 1px solid #702963; font-weight: 400;}
.btn.purple > a:hover {background-color: #58164c; border: 1px solid #58164c !important;}
.btn.orange > * {background-color: #ec912d; border: 1px solid #ec912d; font-weight: 400;}
.btn.orange > a:hover {background-color: #e9762d; border: 1px solid #e9762d !important;}


/* 申込みボタン */
a.btn_contact {display:inline-block; text-decoration:none; font-size:1.2em; font-weight:bold; color:#FFF; }
a.btn_contact span{display:flex; justify-content:center; align-items:center; background-color:#ec912d; border:1px solid #ec912d; width:300px; height:40px; border-radius:6px; margin:10px 0;}
a.btn_contact:hover span{background-color:#FFF; color:#ec912d; transition:0.5s all;}
@media (max-width: 800px) {
    .btn > * {font-size: 16px !important;　width: auto; padding: 20px 10px !important;}
	a.btn_contact {display:block; margin: auto;}
	a.btn_contact span{width:60%; height:40px; margin:10px auto;}
}

/* クローズボタン */
.btn_close{display: flex; justify-content: center; align-items: center; width: auto; height: 30px; padding: 20px;
 border: 1px solid red; color:red; font-size:18px;}


/* プライバシーポリシー */
#privacy_policy{}
#privacy_policy p{margin-bottom: 20px;}
#privacy_policy ul{display: flex; flex-wrap: wrap; justify-content: center; list-style: none;}
#privacy_policy ul li{margin: auto 6px;}
@media screen and (max-width: 800px) {
    #privacy_policy .btn{width: 70%;}
    #privacy_policy ul li{width: 100%;}
}
    
/* ボタン申し込みエリア */
#contact_btn_area{text-align:center; padding-bottom: 50px;}
#contact_btn_area .btn > * {padding: 20px 30px; font-weight:bold;}
#contact_btn_area a.btn_contact{margin: auto;}
#contact_btn_area a.btn_contact span{width:210px; height:60px;}
@media screen and (max-width: 800px) {
     #contact_btn_area .btn{width: 50%; font-size: 20px;}
     #contact_btn_area a.btn_contact span{width: 50%; height:60px;}
}


/* 共通 */
.txt-left{text-align:left;}
.txt-center{text-align:center;}

.pc_view{display: inline-block;}
.sp_view{display: none;}
@media screen and (max-width: 800px) {
	.pc_view{display: none;}
	.sp_view{display: inline-block;}
}

.guide{text-indent: -1em; padding-left: 1em; display: block;}
.space{padding-left: 1em;}

/* 白背景 */
.white_bk{background: #FFF; padding: 50px 0;}
.white_bk h2 span{background-color:#FFF; }
@media screen and (max-width: 800px) {
	.white_bk {width: 100%;}
	.white_bk h2{width:auto; padding:0 10%; margin:20px 0px; line-height: 120%;}
	.white_bk p{width: 90%; margin: auto;}
}

/* 色文字 */
.txt_red{color: red;}
.txt_green{color: green;}


/* PAGE TOP、お問い合わせ */
#page-top_v2,
#link-form_v2{position: fixed; background: #666; border-radius: 4px; font-size: 12px; border: 1px solid #fff; z-index: 9999; display: flex; justify-content: center; align-items: center; width: 100px; height: 27px;
right:0px; border-right:0; border-radius:4px 0 0 4px; background: rgba(0,0,0,0.7);}
#page-top_v2 a,
#link-form_v2 a{ color: #fff; text-decoration: none;}
@media (min-width: 600px) {
    #page-top_v2 {bottom:50px;}
    #link-form_v2 {bottom:22px;}
}
@media (max-width: 600px) {
   #page-top_v2 {bottom:60px;}
    #link-form_v2 {bottom:32px;}
}
/* アニメーション(jsとセットです) */
/* 参考URL　https://gokansoichiro.com/blog/scroll-animation/ */
.effect-fade {
  opacity: 0;
  transform: translate(0, 80px); /* フェードインで動く高さを指定 */
  transition: all 2000ms; /* フェードインにかかる時間を指定 */
}
.effect-scroll {
  opacity: 1;
  transform: translate(0, 0);
}


.fadeIn_up {animation-name: fadeIn_up; animation-duration: 2s;/* animation-iteration-count: infinite; /*無限ループ*/}
@keyframes fadeIn_up {
	from {opacity: 0;transform: translateY(20px);}
	to {opacity: 1; transform: translateY(0);}
}
.fadeIn_down {animation-name: fadeIn_down; animation-duration: 2s;}
@keyframes fadeIn_down {
	from {opacity: 0; transform: translateY(-20px);}
	to {opacity: 1; transform: translateY(0px);}
}

.disc {width: 100%; margin-bottom: 30px!important;}

.red {color: red;}
