@charset "UTF-8";



/** ************************************* **

	TABLE CONTENTS
	---------------------------
		01. Globals
		02. 丸数字カウンターリスト
		03. 丸の中の文字
		04. 吹き出し
		05. Vertical Timeline
		06. order_btn
		07. 区切り線
		08. 文字のサイズ変更
	---------------------------

** ************************************* **/






/** 01. Globals
**************************************************************** **/


@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap');



/* -------------------------------------------------- *
* 画像上の文字
* -------------------------------------------------- */
.colorfilter-base {
	background-color: rgba(0,0,0,1.00); /* カラーフィルタ効果の色を指定 */
}

.colorfilter-image {
	opacity: 0.6; /* カラーフィルタ効果の度合いを指定(※) */
	display: block;
}

.bg-inner {
	text-align: center;
	position: absolute;
	width: 100%;
}

#example {
	position: relative;
	margin: 0;
}

#example img {
	width: 100%;
}

#example h4 {
	position: absolute;
	top: 30%;
	font-family: 'YakuHanJP',"游ゴシック体", YuGothic, "YuGothic M", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 2.5em;
	color: #0097cf;
	border-bottom: solid 0px #E1E2E1;
	margin-top: 0px;
	margin-bottom: 0px;
}

#example-in {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	margin: 0 auto;
	line-height: 1.7;
	padding: 20px 10px;
}

/* Opacity */
#example{
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}


@media (max-width: 768px) {
	#example h4 {
		font-size: 2em;
		color: #0097cf;
		border-bottom: solid 0px #E1E2E1;
		top: 40%;
	}
	
	#example p {
		color: #494949;
		font-size: 3vw;
	}
	
	#example-in {
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		width: 100%;
		height: 100%;
		margin: 0 auto;
		line-height: 1.7;
		padding: 10px 10px;
	}
}

@media (max-width: 400px) {
	#example h4{
	top: 15%;
	font-size: 1.5em;
	}
}

.btn {
	margin-top: 5px;
	margin-bottom: 5px;
}



.md {
	font-size: 1.3em;
}

@media (max-width: 768px) {
.md {
	font-size: 1.05em;
}
}

@media (max-width: 400px) {
.md {
	font-size: 1em;
}
}


.btn-yellow {
  color: #333;
  background-color: #F0E68C;
  border-color: #F0E68C;
  -webkit-transition-timing-function: ease;
       -o-transition-timing-function: ease;
          transition-timing-function: ease;
  -webkit-transition-duration: .3s;
       -o-transition-duration: .3s;
          transition-duration: .3s;
  -webkit-transition-property: all;
       -o-transition-property: all;
          transition-property: all;
}
.btn-yellow:focus, .btn-yellow.focus {
  color: #fff;
  background-color: #D6B904;
  border-color: #D6B904;
}
.btn-yellow:hover {
  color: #fff;
  background-color: #D6B904;
  border-color: #D6B904;
}
.btn-yellow:active, .btn-yellow.active, .open > .btn-yellow.dropdown-toggle {
  color: #fff;
  background-color: #D6B904;
  border-color: #D6B904;
}
.btn-yellow:active:hover, .btn-yellow:active:focus, .btn-yellow:active.focus, .btn-yellow.active:hover, .btn-warnyellowing.active:focus, .btn-yellow.active.focus, .open > .btn-yellow.dropdown-toggle:hover, .open > .btn-yellow.dropdown-toggle:focus, .open > .btn-yellow.dropdown-toggle.focus {
  color: #fff;
  background-color: #D6B904;
  border-color: #D6B904;
}
.btn-yellow:active, .btn-yellow.active, .open > .btn-yellow.dropdown-toggle {
  background-image: none;
}



.underline_red {
	background:url(../images/wave-red.png) bottom repeat-x;
	background-size: 20px;
	padding: 5px 0;
}













/** 02. 丸数字カウンターリスト
 **************************************************************** **/
ol.circle_list {
	counter-reset: my-counter;
	list-style: none;
	padding: 0;
}

#content ol.circle_list li {
	margin-bottom: 10px;
	padding-left: 30px;
	position: relative;
	line-height: 1.5;
}

ol.circle_list li::before {
	content: counter(my-counter);
	counter-increment: my-counter;
	background-color: #52A7E0;
	color: #fff;
	display: block;
	float: left;
	line-height: 22px;
	margin-left: -30px;
	text-align: center;
	height: 22px;
	width: 22px;
	border-radius: 50%;
	vertical-align: middle;
}

ol.circle_list.circle_pink li::before {
	content: counter(my-counter);
	counter-increment: my-counter;
	background-color: #FF457B;
	color: #fff;
	display: block;
	float: left;
	line-height: 22px;
	margin-left: -30px;
	text-align: center;
	height: 22px;
	width: 22px;
	border-radius: 50%;
	vertical-align: middle;
}






/** 03. 丸の中の文字
 **************************************************************** **/
.circle {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	flex-flow: column; 
	margin-right: 1px;
}

/* 円の大きさ */
.size_normal{
	width: 20px;
	height: 20px;
}

/* 文字の大きさ */
.letter1 {
	font-size: 1em;
}

/* 円と文字の色 */
.blue1 {
	background-color: #52A7E0;
	color: #fff;
}






/** 04. 吹き出し
 **************************************************************** **/
.bubble_wrap {
	position: absolute;
	width: 100%;
	bottom: -10px;
}


@media (max-width: 991px) {
.bubble_wrap {
	position: absolute;
	width: 100%;
	bottom: -10px;
}
}

@media (max-width: 768px) {
.bubble_wrap {
	position: absolute;
	width: 100%;
	bottom: -15px;
}
}

@media (max-width: 400px) {
.bubble_wrap {
	position: absolute;
	width: 100%;
	bottom: -10px;
}
}




.bubble01 {
	font-family: 'M PLUS Rounded 1c', "Open Sans", "Helvetica Neue", Helvetica, "Arial","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "游ゴシック", YuGothic, sans-serif;
	position: relative;
	display: inline-block;
	text-align: center;
	color:#FFF;
	padding: 25px;
	background-color: rgba(243,152,0,0.80);
	border-radius: 5px;
	margin: 5px 5px 10px;
}

.bubble01:before {
	content: '';
	position: absolute;
	display: block;
	z-index: 1;
	border-style: solid;
	border-color: rgba(243,152,0,0.80) transparent;
	border-width: 20px 10px 0 10px;
	bottom: -20px;
	left: 50%;
	margin-left: -10px;
}


@media (max-width: 991px) {
	.bubble01 {
		font-size: 1.5vw;
		padding: 10px;
		border-radius: 15px;
		margin: 5px;
}

.bubble01:before {
	border-style: solid;
	border-color: rgba(243,152,0,0.80) transparent;
	border-width: 10px 5px 0 5px;
	bottom: -9px;
	left: 50%;
	margin-left: -5px;
}
}

@media (max-width: 950px) {
	.bubble01 {
		font-size: 1.3vw;
		padding: 10px;
		border-radius: 15px;
		margin: 5px;
}
}

@media (max-width: 768px) {
.bubble01 {
	font-size: 2vw;
	padding: 10px;
	border-radius: 15px;
	margin: 5px;
}

.bubble01:before {
	border-style: solid;
	border-color: rgba(243,152,0,0.80) transparent;
	border-width: 10px 5px 0 5px;
	bottom: -9.9px;
	left: 50%;
	margin-left: -5px;
}
}

@media (max-width: 400px) {
.bubble01 {
	font-size: 3vw;
}
}





/** 05. Vertical Timeline
 **************************************************************** **/
.content_inner {
    padding: 15px 15px;
} 
/*===== Vertical Timeline =====*/
#conference-timeline {
	position: relative;
	width: 100%;
	margin: 0 auto;
	z-index: 1;
	background: #e6e6e6;
}
#conference-timeline .timeline-start,
#conference-timeline .timeline-end {
	display: table;
	font-family: 'YakuHanJP' ,"Roboto", "Open Sans", "Helvetica Neue", Helvetica, "Arial","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "游ゴシック", YuGothic, sans-serif;
	font-size: 18px;
	font-weight: 900;
	text-transform: uppercase;
	background: #42adc2;
	padding: 15px 23px;
	color: #fff;
	max-width: 35%;
	width: 100%;
	text-align: center;
	margin: 0;
}
#conference-timeline .conference-center-line {
	position: absolute;
	width: 3px;
	height: 100%;
	top: 0;
	left: 15%;
	background: #42adc2;
	z-index: -1;
}
#conference-timeline .conference-center-line:before {
	content: "";
	position: absolute;
	left: -15px;
	bottom: -16px;
	border: 16px solid transparent;
	border-top: 16px solid #42adc2;
}
#conference-timeline .conference-timeline-content {
	position: relative;
	padding-top: 20px;
	padding-bottom: 30px;
}
.timeline-article {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	margin: 20px 0;
}
.timeline-article .content-left-container,
.timeline-article .content-right-container {
	max-width: 80%;
	width: 100%;
}
.timeline-article .timeline-author {
	display: block;
	font-weight: 400;
	font-size: 14px;
	line-height: 24px;
	color: #242424;
	text-align: right;
}
.timeline-article .content-left,
.timeline-article .content-right {
	position: relative;
	width: auto;
	border: 1px solid #ddd;
	background-color: #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,.03);
	padding: 27px 25px;
}
#content .timeline-article p {
	font-family: 'YakuHanJP' ,"Open Sans", "Helvetica Neue", Helvetica, "Arial","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "游ゴシック", YuGothic, sans-serif;
	margin: 0 0 0 60px;
	padding: 0;
	font-weight: 400;
	color: #242424;
	font-size: 14px;
	line-height: 24px;
	position: relative;
}
#content .timeline-article ul {
	margin: 0 0 0 60px;
	font-size: 14px;
	line-height: 24px;
	position: relative;
}
#content .timeline-article p span.article-number {
	position: absolute;
	font-weight: 300;
	font-size: 44px;
	top: 10px;
	left: -60px;
	color: #42adc2;
}
.timeline-article .content-left-container {
	float: left;
}
.timeline-article .content-right-container {
	float: right;
}
.timeline-article .content-left:before,
.timeline-article .content-right:before{
	position: absolute;
	top: 20px;
	font-size: 23px;
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	color: #fff;
}
.timeline-article .content-left:before {
	content: "\f0da";
	right: -8px;
}
.timeline-article .content-right:before {
	content: "\f0d9";
	left: -8px;
}
.timeline-article .meta-date {
	position: absolute;
	top: 0;
	left: 15.1%;
	width: 62px;
	height: 62px;
	margin-left: -31px;
	color: #fff;
	border-radius: 100%;
	background: #42adc2;
}
.timeline-article .meta-date.non {
	position: absolute;
	top: 25px;
	left: 15.1%;
	width: 20px;
	height: 20px;
	margin-left: -10px;
	color: #fff;
	border-radius: 100%;
	background: #42adc2;
}
.timeline-article .meta-date .date,
.timeline-article .meta-date .month {
	display: block;
	text-align: center;
	font-weight: 900;
}
.timeline-article .meta-date .date {
	font-size: 30px;
	line-height: 40px;
}
.timeline-article .meta-date .month {
	font-size: 18px;
	line-height: 10px;
}
/*===== // Vertical Timeline =====*/

/*===== Resonsive Vertical Timeline =====*/
@media only screen and (max-width: 830px) {
	#conference-timeline .timeline-start,
	#conference-timeline .timeline-end {
		margin: 0;
		max-width: 100%;
	}
	#conference-timeline .conference-center-line {
		margin-left: 0;
		left: 30px;
	}
	#conference-timeline .conference-center-line:before {
		content: "";
		position: absolute;
		left: -15px;
		bottom: -16px;
		border: 16px solid transparent;
		border-top: 16px solid #42adc2;
	}
	.timeline-article .meta-date {
		margin-left: 0;
		left: 0px;
	}
	.timeline-article .meta-date.non {
		margin-left: 0;
		left: 23px;
	}
	.timeline-article .content-left-container,
	.timeline-article .content-right-container {
		max-width: 100%;
		width: auto;
		float: none;
		margin-left: 80px;
		min-height: 53px;
	}
	.timeline-article .content-left-container {
		margin-bottom: 20px;
	}
	.timeline-article .content-left,
	.timeline-article .content-right {
		padding: 10px 20px;
		min-height: 65px;
	}
	.timeline-article .content-left:before {
		content: "\f0d9";
		right: auto;
		left: -8px;
	}
	.timeline-article .content-right:before {
		/* display: none;*/
	}
}
@media only screen and (max-width: 400px) {
	#content .timeline-article p {
		margin: 0;
	}
	#content .timeline-article ul {
		margin: 0px;
		font-size: 14px;
		line-height: 24px;
		position: relative;
	}
	.timeline-article p span.article-number {
		display: none;
	}
}
/*===== // Resonsive Vertical Timeline =====*/






/** 06. order_btn
 **************************************************************** **/




.order_btn {
	position: fixed;
	bottom: 20px;
	right: 0;
	font-size:1.1em;
	z-index:5;
}
.order_btn.bottom2 {
	bottom: 100px;
}
.order_btn a {
	background: rgba(36,163,90,0.90);
	text-decoration: none;
	color: #fff;
	width: 200px;
	padding: 15px;
	text-align: center;
	display: block;
	-webkit-border-radius: 5px 0 0 5px;
	   -moz-border-radius: 5px 0 0 5px;
	        border-radius: 5px 0 0 5px;
}
.order_btn a.back_yellow {
color: #333;
	background: rgba(252,218,5,0.90);
}
.order_btn a :hover {
	text-decoration: none;
	background: rgba(34,155,85,0.90);
}

.order_btn a.back_yellow:hover {
	text-decoration: none;
	background: rgba(249,228,94,0.90);
}
@media (max-width: 768px) {
	.order_btn {
		position: fixed;
		bottom: 100px;
		right: 10px;
		font-size: 0.8em;
	}
	.order_btn.bottom2 {
	bottom: 200px;
}
	.order_btn a {
		background: rgba(36,163,90,0.90);
		text-decoration: none;
		border: 1px solid #fff;
		color: #fff;
		width: 80px;
		height: 80px;
		padding: 14px;
		text-align: center;
		display: block;
		-webkit-border-radius: 50%;
		   -moz-border-radius: 50%;
		        border-radius: 50%;
	}
	.order_btn a:hover {
		text-decoration: none;
		background: rgba(34,155,85,0.90);
	}
	.menu-button {
	position: absolute;
	right: 0px;
	top: 0px;
	}
}



/** 07. 区切り線
 **************************************************************** **/


.cp_hr01 {
	height: 2px;
	border-width: 0;
	background-color: #80deea;
	background-image: -webkit-linear-gradient(right,
	#80deea 5px,#0097a7 5px);
	background-image:         linear-gradient(-90deg,
	#80deea 5px,#0097a7 5px);
	background-size: 10px 10px;
	margin-top: 2em;
	margin-bottom: 2em;
}





/** 08. 文字のサイズ変更
**************************************************************** **/


#content .bg {
	font-size: 300%;
}

#content .md {
	font-size: 200%;
}


#content .sm {
	font-size: 120%;
}

#content .ssm {
	font-size: 90%;
}

@media all and (max-width: 515px) {


#content .bg {
	font-size: 5.6vw;
}

#content .md {
	font-size: 4.7vw;
}

#content .sm {
	font-size: 4.0vw;
}

#content .ssm {
	font-size: 3.0vw;
}

}

/* ----------------------------------------
 * 丸の中の文字
 * ---------------------------------------- */
.maru {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  flex-flow: column; 
  vertical-align: middle;
  margin: 1px;
	text-align: center;
}
/* 円の大きさ */
.size_normal{
  width: 100px;
  height: 100px;
}
/* 文字の大きさ */
.letter3 {
  font-size: 1em;
  line-height: 1.5em;
}
/* 円と文字の色 */

.gray1 {
  color: #5F5F5F;
  border: 1px solid #5F5F5F;
}
.yellow1 {
  color: #333;
	font-weight: 700;
	background-color: #FFFF00;
}