@charset "UTF-8";

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, 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, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
}

* { margin: 0; padding: 0; box-sizing:border-box;}
html {
	height: 100%;
	font-size:18px;
	 line-height:1.5;
}
a{
	text-decoration: none;
}
li{
	list-style:none;
}
img{max-width:100%;}
.pc{display: none;}
.sp{display: inherit;}
.full_contents{width:100%;}
.common_contents{width: 90%;margin:0 auto;}

body{
	background: url(../img/bg_deco.jpg) no-repeat;
	background-position-y: 48vw;
	background-size: 100% auto;
}
#loading_cover{
	position: fixed;
	width: 100%;
	height: 100%;
	background: #ffffffbd;
	z-index: 9999;
	display: grid;
	justify-content: center;
}
.loading_text{
	text-align:center;
	position:relative;
	top: 47vh;
}
  .loader{
    width: 100%;
    height: 94%;
    align-content: center;
  }

  .loader img{
    width: 100px;
    display: block;
    transform-origin: 50% 50%;
    will-change: transform, filter;
    animation: spinMorph 2.1s infinite;
  }

  /* 回転しながら「伸び縮み＋軽い傾き」で変形して見せる */
  @keyframes spinMorph{
    0%   { transform: rotate(0deg)   }
    20%  { transform: rotate(72deg)  }
    40%  { transform: rotate(144deg) }
    60%  { transform: rotate(216deg) }
    80%  { transform: rotate(288deg) }
    100% { transform: rotate(360deg) }
  }

.site-header{
	width: 100vw;
	top: 0;
	height: 70px;
	background: url(../img/header_bg.png);
	background-size: 100% 100%;
	position: fixed;
	z-index: 999;
}
.header_inner{
	width:100%;
	height: 60%;
	position: relative;
	top: 12px;
	margin:0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.header_inner img,
.header_inner a{
	height:100%;
}

.top_image{
	padding-top: 68px;
}

h2{
	font-size: 1.6rem;
	margin: 0 auto;
	margin-top: 3rem;
	text-align: center;
}
h2 .ico{
	height: 2.1rem;
	vertical-align: sub;
	margin-right: 0.5rem;
}
h3{
	display: flex;
	height: 60px;
	font-size: 1.4rem;
	background: url(../img/icon_02.png) no-repeat;
	background-position: center;
	align-items: center;
	background-size: contain;
	justify-content: center;
	margin: 3rem 0 1rem 0;
}

#about {
	position:relative;
	padding-bottom: 2rem;
}
#about p{
	position:relative;
	background:#505b6ccc;
	color:#fff;
	padding:1rem;
	z-index:1;
	backdrop-filter: blur(1px);
	width: 100%;
}
.functions_content{
	border:1px solid #5d99d7;
	border-radius:10px;
	padding:1rem;
}
.functions_content .flexbox{
	display:flex;
	height: 100%;
	flex-direction: column;
}
.functions_content img{
	height: 40vw;
	width: auto;
	object-fit: cover;
	margin-bottom: 0.5rem;
}
.functions_content h4{
	color:#5d99d7;
	font-size: 1.4rem;
}

#howto ul{
	display:flex;
	align-items: center;
	flex-direction: column;
	width:70%;
	margin:0 auto;
}
#howto ul li{
	margin:0.5rem;
}
#howto ul li.arrow{
  width: 0;
  height: 100%;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 24px solid #5d99d7;
}

#rep h3{
	background:#333;
	font-family:serif;
	color:#fff;
	border:3px solid;
	border-image: linear-gradient(to right, #ee7383, #ffaf2f, #d9eb5a, #73e4c3, #73e4c3, #829fd5) 1;
	height: auto;
	padding: 0.5rem;
	font-size: 1.2rem;
	line-height: 1.5;
}
#rep h3 + div{
	display:flex;
	flex-direction: column-reverse;
}
#rep img{
	width: 100%;
	margin-top: 1rem;
}

#join{
	background:#505b6c;
	padding-top:2rem;
	margin-top: 5rem;
}
#join img{
	display:block;
	width:900px;
	margin:0 auto;
}

#concept{
	margin-top:5rem;
}
#concept ul{
	display: flex;
	flex-wrap: nowrap;
	width: 100%;
	margin: 2rem auto;
	margin-top: 0;
	background: linear-gradient(90deg, #efcee2, #acddf7);
	flex-direction: column;
}
#concept ul li{
	width: 100%;
	padding:2rem;
}
#concept ul li img{
	float: left;
	height:50px;
	margin-right: 12px;
}
#concept ul li h4{
	font-size: 1.2rem;
	line-height: 1.2;
	height:50px;
	display: grid;
	align-items: center;
}
#concept ul li p{
	margin-top:12px;
}

#qa {
	width:100vw;
	position:relative;
	margin-left: -5.7%;
}
#qa dl{
	background:#505b6c;
	padding:2rem;
	color:#fff;
}
#qa dt{
	margin-bottom:2rem;
}
#qa dd{
	padding-bottom:2rem;
	border-bottom:1px solid #eee;
	border-image: linear-gradient(to right, #efcee2, #acddf7) 1;
	margin-bottom: 2rem;
}
#qa dd:last-child{
	border:none;
	padding-bottom:0;
	margin-bottom: 0;
}
#qa dt:before{
	display: inline-block;
	content:"";
	width: 28px;
	height: 28px;
	background: url(../img/q.png) no-repeat;
	background-size: contain;
	vertical-align: sub;
	margin-right: 10px;
}
#qa dd:before{
	display: inline-block;
	content:"";
	width: 28px;
	height: 28px;
	background: url(../img/a.png) no-repeat;
	background-size: contain;
	vertical-align: sub;
	margin-right: 10px;
}

footer ul{
	width:100%;
	margin: 0 auto;
	display:flex;
	justify-content: center;
}
footer li{
	margin:1rem;
}
.copyright{
	text-align:center;
	height:50px;
}