@charset "utf-8";
/**********************************************
 リセットCSS
**********************************************/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   license: none (public domain)
*/
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, rem, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, rembed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* html5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*-----resetcss */


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

/**********************************************
 基本設定：フォントサイズ設定
**********************************************/

/*スマホフォントサイズ*/
html {
	font-size: 54.69%;
}

/*pcフォントサイズ*/
@media (min-width:1025px) {
	html {
		font-size: 62.5%;
	}
}


/**********************************************
 基本設定：画面サイズ
**********************************************/

html { 
	position:relative;
	scroll-behavior: smooth;
}

body {
	color:#707070;
	font-size: 1.8rem;
	line-height: 1.8;
	font-weight: 600;
	letter-spacing: 0.05em;
	font-feature-settings: "palt";
}

.wrapper {
	overflow-X: hidden;
}

.hidden {
	overflow:hidden;
}

.con-linkal 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;
}

.con-linkal nav {
    position:fixed;
    background:#ffffff;
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
    width:100%;
	height:60px;
	padding:5px 15px;
	z-index:5;
}

.con-linkal nav h1 {
	font-size:3.2rem;
	font-weight:bold;
	display: inline-block;
	vertical-align:top;
}

h1 a {
	color:#707070;
} 

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

.nav-menu {
	display: none;
}

.nav-menu a {
	display:inline-block;
	margin:0 15px;
	position: relative;
	top:1rem;
	color:#707070;
	text-decoration: none;
	transition: 0.3s all;
	border-bottom:3px solid #c292ff;
}

.nav-menu a:first-child{
	margin-left:60px;
}

.nav-menu a:hover {
	opacity: 0.6;
	border-bottom:6px double #c292ff;
}
  
@media (min-width:768px) {
	.nav-menu {
		display: inline-block;
		position:relative;
		vertical-align:top;
		margin-left:30px;
	}
}
.con-linkal h2 {
	position:relative;
	text-align: center;
	font-size:4rem;
	font-weight:bold;
}
.con-linkal h2::after {
	display: inline-block;
	position:absolute;
	width:30%;
	height:8px;
	content:'';
	right:50%;
	left:50%;
	bottom:0;
	transform:translateX(-50%);
	background: #ffca37;
}

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

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

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

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

.main-logo {
	display: none;	
}

@media (min-width:768px) {
	.main-logo {
		display: block;
		position: absolute;
		top:30%;
		left:5vw;
		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 #ffffff);
}

.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:#FFE0B7;
	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;
}

#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:#FFFCB4;
	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:10rem;
}

@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 {
	width:725px;
	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:#79B48D;
	padding-top:150px;
	padding-bottom:60px;
	color:#ffffff;
	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 #FFFCB4;
	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;
	} 
}

#mail-example {
	position:relative;
	background:#D1FAFF;
	height:90vh;
	padding-top:60px;
	padding-bottom:60px;
}

.mailer-base {
    background: #FFFFFF;
    border: 1px solid #CECECE;
    border-radius: 10px 10px 0px 0px;
    width:670px;
    max-width:100%;
    height:664px;
}
.mailer-band {
    background: #404040;
    border-radius: 10px 10px 0px 0px;
    width:670px;
    max-width:100%;
    height:44px;
}
.mailer-menu {
    background: #FFFFFF;
    box-shadow: 0px 3px 10px #00000029;
    border-radius: 3px;
    opacity: 0.5;
    width:630px;
    height:40px;
    margin:auto;
}
.mailer-footer {
    padding:0 20px;
}
.mailer-button {
    background: #1A73E8;
    border-radius: 3px;
    opacity: 0.8;
    width:100px;
    height:40px;
}

.con-linkal footer {
	position:relative;
	background:#888CFF;
	background:#D1FAFF;
	padding:30px 30px 10px;
}

#spec {
	color: #545454;
	position:relative;
	background:#aec4f0;
	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;
}