@charset "utf-8";


/* CSS Document */
a{
	/* \*/
	overflow:hidden;
	/* */
	outline:none;
	text-decoration: none;
	color:#333;
	transition:0.3s;
}
a:link{
}
a:visited{
	color:#333;
}
a:hover{
	opacity:0.5;
	color:#333;
}
section a, section a:visited{
	color:#333;
}
::selection{
    background: #2795ae;
    color: #ffffff;
}
::-moz-selection{
    background: #2795ae;
    color: #ffffff;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
	background: #f1f4f6;
}
::-webkit-scrollbar-thumb {
background: #2795ae;
}

/* layout */
html{
	font-size: 62.5%;
}
body{
	margin:0;
	color:#000;
	font-size: 1.6rem;
	line-height:1.8;
	overflow-x: hidden;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "sans-serif";
	background: #E4E4E4;
}
.wrapper{
	overflow-x: hidden;
	max-width: 37.5rem;
	background: #FFF;
	margin: auto;
}

.container{
	margin-left: auto;
	margin-right: auto;
	text-align:left;
    display: flow-root;
	padding: 0 6%;
}
img{
	max-width: 100%;
}



/*-----------------------------------*/
/* index */
header{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	padding: 1rem;
}
header h3{
	margin-bottom: 0;
	width: 40%;
}
header a.h_btn{
	width: 47%;
}
footer{
	background: #1e1e82;
	padding: 20px;
	text-align: center;
	color: #FFF;
}
section{
	padding: 3rem 0;
}
h1{
	background: #029aad;
	color: #FFF;
	padding: 60px 5%;
	text-align: center;
	font-size: 2.5rem;
}
h2{
	font-size: 2.5rem;
	text-align: center;
	margin-bottom: 20px;
	font-family: "zen-maru-gothic", sans-serif;
	font-weight: 700;
	font-style: normal;
}
h3{
	font-size: 1.8rem;
	text-align: center;
	margin-bottom: 10px;
	font-family: "zen-maru-gothic", sans-serif;
	font-weight: 700;
	font-style: normal;
}
h2 span{
	display: inline-block;
	background: #1e1e82;
	color: #FFF;
	padding: 5px 20px;
	min-width: 80px;
	margin: 10px auto 0;
	font-size: 1.6rem;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "sans-serif";
}
.font_color{
	color: #1e1e82;
	font-size: 2.2rem;
}
.bg01{
	background: #d4efc2;
}
.bg02{
	background: #caf0fc;
}
.bg03{
	background: #f4f4f4;
}
.down {
	background: #cecece;
	height: calc(tan(60deg) * 60px / 2);
	width: 200px;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	margin: -80px auto 40px;
}
.btn_box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

#btn_animation .btn {
  display: block;
  position: relative;
  width: 200px;
  height: 78px;
  line-height: 78px;
  font-size: 24px;
  text-decoration: none;
  background-color: #364f6b;
  color: #fbfbfb;
  text-align: center;
  overflow: hidden;
}
ul.support{
	margin-bottom: 40px;
}
ul.support li{
	background: #FFF;
	border-radius: 15px;
	padding: 20px;
	margin-bottom: 20px;
	text-align: justify;
}
ul.support li img{
	margin-bottom: 10px;
}
ul.job li span{
	color: #3fa9f5;
}
dl.qa{
	padding: 20px;
	background: #FFF;
	border-radius: 15px;
	border: solid 3px #1e1e82;
	margin-bottom: 20px;
}
dl.qa dt{
	border-bottom: solid 2px #1e1e82;
	padding-bottom: 7px;
	margin-bottom: 7px;
	color: #1e1e82;
	font-size: 1.7rem;
	font-weight: bold;
}
dl.qa dd{
}
ul.flow li{
}
/*ul.flow li:after{
	display: block;
	content: "";
	position: relative;
	width: 30px;
	height: 30px;
	margin-left: -15px;
	border-left: 4px solid #1e1e82;
	border-bottom: 4px solid #1e1e82;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	box-sizing: border-box;
	margin:auto;
	bottom: -30px;
}
ul.flow li:last-child{
	padding: 20px;
}
ul.flow li:last-child:after{
	display: none;
}*/
.flow_box{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.flow_text h3{
	text-align: left;
}
.flow_text h3 img{
	margin-right: 20px;
}

ul.voice{
	max-width: 780px;
	margin: auto;
}
ul.voice li{
	background: #FFF;
	border-radius: 20px;
}
.voice_box{
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 10px;
}
.voice_text{
	font-size: 1.2rem;
}
.star{
	font-size: 1.5rem;
	letter-spacing: 5px;
}


@keyframes shiny {
    0% {
        transform: scale(0) rotate(25deg);
        opacity: 0;
    }

    50% {
        transform: scale(1) rotate(25deg);
        opacity: 1;
    }

    100% {
        transform: scale(50) rotate(25deg);
        opacity: 0;
    }
}

.shiny-btn {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    overflow: hidden;
}

.shiny-btn::after {
    content: '';
    position: absolute;
    top: -100px;
    left: -100px;
    width: 50px;
    height: 50px;
    background-image: linear-gradient(100deg,  rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 0) 0%);

    /* アニメーション */
    animation-name: shiny;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}