@charset "utf-8";

/*-----resetcss */

.lsf, .lsf-icon{
	letter-spacing: normal !important;
}

.con-cc {
	overflow-x: hidden;
}

.con-cc img {
	max-width: 100%;
	height: auto;
}

.effect-fade {
	opacity : 0;
	transform : translate(0, 45px);
	transition : all 300ms;
}

.effect-fade.effect-scroll {
	opacity : 1;
	transform : translate(0, 0);
}

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

**********************************************/
.radius-button {
	display:inline-block;
	position: relative;
	border-radius:120px;
	box-shadow: 0 3px 6px rgba(0,0,0,0.2);
	text-align: center;
	padding: 20px;
	width:550px;
	max-width:90%;
	color:#ffffff;
	font-size:2rem;
	font-weight:bold;
	transition:0.3s ease all;
	margin-top:30px;
	margin-bottom:30px;
	z-index:5;
	cursor: pointer;
}

.radius-button:hover {
	opacity: 0.8;
	transform:scale(1.02);
	box-shadow: 2px 5px 10px rgba(0,0,0,0.2);
}

.radius-button a {
	display: inline-block;
	color:inherit;
	text-decoration: none;
}

h1 a {
	color:#707070;
}

h1 a:hover {
	color:#707070;
	text-decoration: none;
}

.con-cc h2 {
	position:relative;
	text-align: center;
	font-size:3rem;
	font-weight:bold;
}
.con-cc h2::after {
	display: inline-block;
	position:absolute;
	width:30%;
	height:8px;
	content:'';
	top: 105%;
	right:50%;
	left:50%;
	bottom:0;
	transform:translateX(-50%);
	background: #FF7700;
}

.h2sub {
	font-size:1.8rem;
	font-weight:bold;
}

@media (min-width:1025px) {
	.h2sub {
		font-size:2rem;
	}
}

#top {
	position:relative;
	background:#ffffff;
	padding-top:100px;
	padding-bottom:80px;
	z-index: 0;
}

#top .radius-button {
	position:absolute;
	background:#FF7700;
	top:55%;
	left:5vw;
}

.main-logo {
	display: none;
}

@media (min-width:768px) {
	.main-logo {
		display: block;
		position: absolute;
		top:30%;
		left:10vw;
		z-index:3;
	}
}

.main-logo div{
	color:#333333;
	display: inline-block;
	font-size:6rem;
	font-weight:bold;
	vertical-align: top;
	filter: drop-shadow(4px 4px 0px #eeeeee);
}

.jump-logo {
	position: relative;
}

@media (min-width:768px) and (max-width:1024px) {
	.jump-logo {
		width:80px;
	}
}

.mntr {
	position:relative;
	text-align:right;
	right:30px;
	top:-60px
}

@media (min-width:768px) {
	.mntr {
		top:0;
	}
}

.mntr img {
	max-width:90%;
	width:60vw;
	filter: drop-shadow(0 3px 3px rgba(0,0,0,0.2));
}

#what-is {
	position:relative;
	background:#eeeeee;
	padding-top:60px;
	padding-bottom:60px;
}

#what-is .row {
	align-items: flex-start;
}

#what-is .col-6, #what-is .col-lg-4 {
	margin-top:15px;
	margin-bottom:30px;
}

#what-is .col-6 img, #what-is .col-lg-4 img{
}

#what-is .js-scrollable {
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

#what-is table {
	background:rgba(250,250,250,0.9);
	border:2px solid;
	white-space: nowrap;
	margin-bottom:15px;
	min-width:100%;
}

#what-is table th {
	border: 1px solid;
	padding:5px;
}

#what-is table td {
	border:1px solid;
	padding:0 5px;
}

#what-is ul {
	font-size:0.8em;
}

#solution {
	position:relative;
	background:#ffffff;
	padding-top:60px;
	padding-bottom:120px;
}

#solution h3 {
	font-size:1.6em;
	font-weight:bold;
	padding:15px;
	margin-top:30rem;
	margin-bottom:45px;
	color:#ffffff;
	background:#454c63;
}

#solution h3:first-child {
	margin-top:5rem;
}

@media (min-width: 1200px) {
	#solution .container {
		max-width: 960px;
	}
}

#solution .left .point img,
#solution .right .point img {
	filter: drop-shadow(1px 1px 1px);
}

.balloon {
	display: inline-block;
	background: #f0f0f0;
	border-radius: 15px;
	padding:1.5rem 2rem;
	text-align: left;
	filter: drop-shadow(1px 1px 1px);
}
.balloon::after {
	content: '';
	border: 14px solid transparent;
	border-top-color: #f0f0f0;
	position: absolute;
	top: 0;
}

.balloon.chat {
	display: inline-block;
	background: #ffffff;
	border-radius: 15px;
	padding:1.5rem;
	text-align: left;
	filter: drop-shadow(1px 1px 1px);
}
.balloon.chat::after {
	content: '';
	border: 14px solid transparent;
	border-top-color: #ffffff;
	position: absolute;
	top: 0;
}
.balloon.chat-g {
	display: inline-block;
	background: #8de055;
	border-radius: 15px;
	padding:1.5rem;
	text-align: left;
	filter: drop-shadow(1px 1px 1px);
}
.balloon.chat-g::after {
	content: '';
	border: 14px solid transparent;
	border-top-color: #8de055;
	position: absolute;
	top: 0;
}

.left .point .balloon::after { /* 左側からの三角の位置 */
	left: -10px;
	top:5px;
}
.right .point .balloon::after { /* 左側からの三角の位置 */
	right: -10px;
	top:5px;
}

.balloon-i {
	position: relative;
	display: inline-block;
	background-color: #D1FAFF;
	border-radius: 20px;
	padding:1.5rem;
	text-align: left;
	filter: drop-shadow(1px 1px 1px);
}
  /* 大きい丸 */
.left .balloon-i::before{
	content: '';
	position: absolute;
	display: block;
	border-radius: 50%;
	background-color: #D1FAFF;
	left: -2.6rem;
	top: 15px;
	width: 2.2rem;
	height: 2.2rem;
}
  /* 小さい丸 */
.left .balloon-i::after{
	content: '';
	position: absolute;
	display: block;
	border-radius: 50%;
	background-color: #D1FAFF;
	left: -4rem;
	top: 10px;
	width: 1rem;
	height: 1rem;
}

/* 大きい丸 */
.right .balloon-i::before{
	content: '';
	position: absolute;
	display: block;
	border-radius: 50%;
	background-color: #D1FAFF;
	right: -2.6rem;
	top: 15px;
	width: 2.2rem;
	height: 2.2rem;
}
  /* 小さい丸 */
.right .balloon-i::after{
	content: '';
	position: absolute;
	display: block;
	border-radius: 50%;
	background-color: #D1FAFF;
	right: -4rem;
	top: 10px;
	width: 1rem;
	height: 1rem;
}



.point {
	margin-bottom:2rem;
}

[id^="case"]{
	font-size:1.3em;
}

[id^="answer"] {
	padding:2rem;
	margin-bottom:3rem;
	border:12px double #ffca37;
}

#answer1 svg,
#answer2 svg,
#answer3 svg {
	display: none;

}

#answer1.active svg,
#answer2.active svg,
#answer3.active svg {
	display: inline-block;
	vertical-align: top;
}

.essential {
	max-width:100%;
	display: inline-block;
	font-size:1.1em;
	font-weight:bold;
	vertical-align: top;
}

.essential::after {
	content:'';
	clear: both;
}

#start {
	position:relative;
	background:#eeeeee;
	padding-top:150px;
	padding-bottom:60px;
	z-index: 0;
}

@media (min-width:1025px) {
	#start {
		padding-top:240px;
	}
}

.stratsub, .specsub {
	width:640px;
	max-width:80%;
	margin:0 auto;
}

#start::before {
	content:'';
	position: absolute;
	top: -0.5px;
	left: 0;
	display: block;
	width: 0;
	height: 0;
	border-top: 0px solid #ffffff;
	border-bottom: 0;
	border-left: 50vw solid transparent;
	border-right: 50vw solid transparent;
	-webkit-transition: border-top-width .5s;
	transition: border-top-width .5s;
}

#start.active::before {
	border-top-width:60px;
}

@media (min-width:1025px) {
	#start.active::before {
	border-top-width:150px;
	}
}

#spec {
	color: #545454;
	position:relative;
	background:#ffffff;
	padding-top:60px;
	padding-bottom:60px;
}

#spec .detail {
	margin: 10px;
}

#spec table {
    display: table;
    border-collapse: separate;
    box-sizing: border-box;
    text-indent: initial;
    border-spacing: 1px;
    border-color: grey;
}

#spec table th {
    padding: 4px 14px;
    font-weight: 400;
    text-align: left;
    background: #e5e5ee;
}

#spec table td {
	overflow-wrap: break-word;
	background: #fffefe;
}

#spec table td div {
	margin:10px;
}

#spec table ul {
	margin-left:20px;
	list-style-type: square;
}