@charset "UTF-8";
/****************************************************
general
****************************************************/
/*
	reset
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
}

html {
scroll-behavior: smooth;
}

body {
font-family: 'Noto Sans JP', sans-serif;
}

a:hover img {
opacity: .5;
-webkit-opacity: .5;
-moz-opacity: .5;
filter: alpha(opacity=50);	/* IE lt 8 */
-ms-filter: "alpha(opacity=50)"; /* IE 8 */
}
 a img {
-webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
-ms-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6, p, div, ul, ol, li, dl, dt, dd, a {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

ul, ol {
  list-style: none;
}


.slidein{
animation: SlideIn 2s;
}
@keyframes SlideIn {
0% {
opacity: 0;
transform: translateX(-50px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}



.fadein3 {
animation : fadeIn3 3s;
animation-fill-mode: both;
}
@keyframes fadeIn3 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fadein4 {
animation : fadeIn4 4s;
animation-fill-mode: both;
}
@keyframes fadeIn4 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fadein5 {
animation : fadeIn5 5s;
animation-fill-mode: both;
}
@keyframes fadeIn5 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fadein6 {
animation : fadeIn6 6s;
animation-fill-mode: both;
}
@keyframes fadeIn6 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fadein7 {
animation : fadeIn7 7s;
animation-fill-mode: both;
}
@keyframes fadeIn7 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fadein8 {
animation : fadeIn8 8s;
animation-fill-mode: both;
}
@keyframes fadeIn8 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fadein9 {
animation : fadeIn9 9s;
animation-fill-mode: both;
}
@keyframes fadeIn9 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fadein10 {
animation : fadeIn10 10s;
animation-fill-mode: both;
}
@keyframes fadeIn10 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}


.headerBg {
height: 850px;
}
header {
background: url(../images/header_bg01.png) center center / cover no-repeat;
padding: 0px;
height: 800px;
}
.headerPrivacy {
margin: 30px 0 20px;
padding: 0px;
height:100px;
}
.wrapper {
max-width: 1200px;
margin: 0 auto;
}
.wrapper2 {
max-width: 1200px;
margin: 0 auto;
}
.wrapper3 {
max-width: 1000px;
margin: 0 auto;
}
.headerWrapper {
max-width: 1200px;
margin: 0 auto;
}
.headerTop {
max-width: 1200px;
padding-top: 30px;
overflow: hidden;
z-index: 999;
position: fixed;
inset: 0;
margin: 0 auto;
height: 120px;
}
.headerTop > img:nth-child(1) {
width: 230px;
float: left;
filter: drop-shadow(0px 0px 5px rgba(0,0,0, 0.2));
}

.headerTop > ul {
width: 535px;
float: right;
padding-top: 16px;
}
.headerTop > ul li {
float: left;
width: 256px;
}
.headerTop > ul li:nth-child(1) { 
margin-right: 20px;
}
.headerTop > ul li img {
width: 100%;
filter: drop-shadow(0px 0px 2px rgba(0,0,0, 0.1));
}


.mainVisual {
overflow: hidden;
padding-top: 150px;
}
.mainVisual .leftBlock {
width: 50%;
float: left;
}
.mainVisual .leftBlock > img:nth-child(1) {
width: 170px;
position: relative;
left: 10px;
float: left;
}
.mainVisual .leftBlock > img:nth-child(2) {
width: 380px;
position: relative;
left: -70px;
z-index: 1;
}
.mainVisual .rightBlock {
width: 50%;
float: left;
text-align: right;
}
.mainVisual .rightBlock > img:nth-child(1) {
width: 460px;
position: relative;
right: 10px;
top: 60px;
}
.mainVisual .rightBlock > img:nth-child(2) {
width: 300px;
display: block;
position: relative;
left: 50%;
top: 75px;
}
.mainVisualBottom {
background: url(../images/header_bg02.png) center center / cover no-repeat;
overflow: hidden;
text-align: center;
padding-top: 250px;
position: relative;
bottom: 330px;
z-index: 2;
}
.mainVisualBottom > img:nth-child(1) {
width: 90%;
display: block;
margin: 0 auto;
filter: drop-shadow(0px 0px 8px rgba(255,255,255,0.9));
bottom: 120px;
position: relative;
}


.freelanceBlock {
display: flex;
position: relative;
z-index: 3;
}
.freelanceBlock .box {
width: 100%;
height: 410px;
margin-right: 30px;
}
.freelanceBlock .box:last-child {
margin-right: 0;
}
.freelanceBlock .box:nth-child(1) {
background: url(../images/freelance_block_bg01.png)  no-repeat;
background-size: contain;
}
.freelanceBlock .box:nth-child(2) {
background: url(../images/freelance_block_bg02.png)  no-repeat;
background-size: contain;
}
.freelanceBlock .box:nth-child(3) {
background: url(../images/freelance_block_bg03.png)  no-repeat;
background-size: contain;
}
.freelanceBlock .box p {
position: relative;
margin: 0px 35px;
top: 58%;
line-height: 1.8;
font-weight: 300;
text-align: justify;
text-justify: inter-character;
}
.fcBtnBlock p {
margin: 40px;
max-width: 400px;
}
.fcBtnBlock p a:hover img {
opacity: .5;
-webkit-opacity: .5;
-moz-opacity: .5;
filter: alpha(opacity=50);	/* IE lt 8 */
-ms-filter: "alpha(opacity=50)"; /* IE 8 */
}
.fcBtnBlock p a img {
-webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
-ms-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
}
.fcBtnBlock p img {
width: 100%;
}
.fcBtnBlock {
background: url(../images/freelance_block_bg04.jpg) ;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}


.ankenBlock {
display: flex;
margin: 0px 0 150px;
padding-top: 150px;
}
.ankenBlock .boxBg {
position: relative;
width: 22%;
margin-right: 50px;
z-index: 2;
background: url(../images/anken_sample_bg01.png)  no-repeat;
background-size: contain;
background-position-x: right;
background-position-y: bottom;
}
.ankenBlock .boxBg:nth-child(4) {
margin-right: 0px;
}
/*.ankenBlock .boxBg::after {
content: '';
display: inline-block;
width: 100%;
height: 100%;
background-image: url(../images/anken_sample_bg01.png);
background-size: contain;
position: absolute;
top: 3%;
left: 22%;
background-repeat: no-repeat;
}*/
.ankenBlock .boxBg .box {
position: relative;
background-color: #fff;
z-index: 3;
padding: 20px 20px 30px;
border: 1px solid #000;
border-radius: 10px;
line-height: 1.8;
box-sizing: border-box;
height: 98%;
margin-right: 12px;
}
.ankenBlock .boxBg .box p {
position: absolute;
top: -12px;
right: 20px;
background: #e40074;
color: #fff;
padding: 6px 10px;
line-height: 1;
border-radius: 5px;
font-size: 12px;
}
.ankenBlock .boxBg .box .newLabel {
position: absolute;
top: -12px;
right: 20px;
background: #0000ff;
color: #fff;
padding: 6px 20px;
line-height: 1;
border-radius: 5px;
font-size: 12px;
}
.ankenBlock .boxBg .box h3 {
font-size: 22px;
color: #00c6ff;
line-height: 1.4;
}
.ankenBlock .boxBg .box img {
width: 100%;
height: 2.5%;
}
.ankenBlock .boxBg .box .rewardText {
font-size: 24px;
color: #ff8f01;
font-weight: bold;
}
.ankenBlock:nth-child(1) {
margin: 0px 0 50px;
}
.ankenBlock:nth-child(2) {
padding-top: 20px;
}


.block1 > img:nth-child(1) {
width: 50%;
display: block;
margin: 80px auto 60px;
}
.block1 > img:nth-child(2) {
width: 62%;
display: block;
margin: 0 auto 80px;
}


.block2 {
background: url(../images/block2_bg01.jpg) center center / cover no-repeat;
overflow: hidden;
width: 1200px;
margin: 0 auto;
height: 900px;
}
.block2 > img {
width: 100px;
float: left;
position: relative;
top: 20px;
left: -2px;
}
.block2 > .leftBlock {
width: 57%;
position: relative;
left: 70px;
float: left;
color: #25275d;
}
.block2 > .rightBlock {
float: left;
position: relative;
left: 50px;
}
.block2 > .leftBlock:nth-child(2) > p:nth-child(1) {
font-size: 26px;
margin-top: 70px;
line-height: 1.8;
font-weight: bold;
}
.block2 > .leftBlock:nth-child(2) > p:nth-child(2) {
margin-top: 50px;
line-height: 2;
font-size: 20px;
}
.block2 > .rightBlock:nth-child(3) > img {
width: 230px;
position: relative;
left: 39px;
top: 70px;
}


.block3 {
background: #dcf2f9;
padding: 70px;
width: 100%;
margin: 0 auto;
}
.block3 p {
font-size: 20px;
line-height: 2;
}


.block4 {
background: url(../images/block4_bg01.jpg) center center / cover no-repeat;
overflow: hidden;
padding: 80px 0;
}
.block4 .wrapper .leftBlock {
float: left;
width: 20%;
}
.block4 .wrapper .rightBlock {
float: left;
width: 80%;
}
.block4 .wrapper .rightBlock ul li {
float: left;
width: 20%;
text-align: center;
}
.block4 .wrapper .rightBlock ul li:nth-child(5) {
margin-right: 0;
}
.block4 .wrapper .rightBlock ul li img {
width: 58%;
}
.block4 .wrapper .rightBlock ul li:nth-child(2) > img {
width: 60.5%;
}
.block4 .wrapper .rightBlock ul li:nth-child(3) > img {
width: 47.5%;
}
.block4 .wrapper .rightBlock ul li:nth-child(4) > img {
width: 82%;
}
.block4 .wrapper .rightBlock ul li:nth-child(5) > img {
width: 55%;
}
.block4 .wrapper .rightBlock ul li p {
padding: 10px 15px;
font-size: 14px;
text-align: left;
}
.block4 .wrapper .leftBlock img {
width: 55%;
}


.block5 {
background: url(../images/block5_bg01.jpg) center center / cover no-repeat;
overflow: hidden;
padding: 80px 0;
}
.block5 .wrapper .leftBlock {
float: left;
width: 20%;
}
.block5 .wrapper .rightBlock {
float: left;
width: 80%;
}
.block5 .wrapper .rightBlock ul li {
float: left;
width: 20%;
text-align: center;
}
.block5 .wrapper .rightBlock ul li:nth-child(5) {
margin-right: 0;
}
.block5 .wrapper .rightBlock ul li img {
width: 50%;
}
.block5 .wrapper .rightBlock ul li:nth-child(2) > img {
width: 51%;
}
.block5 .wrapper .rightBlock ul li:nth-child(3) > img {
width: 45.5%;
}
.block5 .wrapper .rightBlock ul li:nth-child(4) > img {
width: 47%;
}
.block5 .wrapper .rightBlock ul li:nth-child(5) > img {
width: 54%;
}
.block5 .wrapper .rightBlock ul li p {
padding: 10px 15px;
font-size: 14px;
text-align: left;
}
.block5 .wrapper .leftBlock img {
width: 55%;
}


.entryBlock {
overflow: hidden;
padding: 70px 0;
background: #ededed;
position: relative;
z-index: 3;
}
.entryBlock .wrapper > p img:nth-child(1) {
width: 50%;
float: left;
margin-top: 50px;
}
.entryBlock .wrapper ul {
float: right;
margin-left: 50px;
width: 45%;
}
.entryBlock .wrapper ul li {
text-align: right;
padding: 10px 0;
}
.entryBlock .wrapper ul li img {
width: 62%;
}


.block7 {
overflow: hidden;
}
.block7 img {
width: 100%;
}
.block7 .leftBlock {
width: 50%;
float: left;
border-right: solid 2px #fff;
}
.block7 .rightBlock {
width: 50%;
float: left;
border-left: solid 2px #fff;
}


.block8 {
}
.block8 .wrapper > img {
width: 45%;
position: relative;
bottom: 9px;
margin-top: 60px;
}
.block8 .wrapper ul {
overflow: hidden;
margin: 50px 0 100px;
}
.block8 .wrapper ul li {
width: 25%;
float: left;
text-align: center;
}
.block8 .wrapper ul li img {
width: 95%;
}
.block8 .wrapper ul li.left-to-right:nth-child(2) > img {
width: 98.5%;
}
.block8 .wrapper ul li.right-to-left:nth-child(3) > img {
width: 95%;
}
.block8 .wrapper ul li.right-to-left:nth-child(4) > img {
width: 97%;
}


.formBlock {
max-width: 1200px;
margin: 0 auto;
}
.formBlock > h3 {
text-align: center;
margin: 50px 0 10px;
font-size: 40px;
padding-top: 120px;
}
.formBlock > p {
text-align: center;
margin-bottom: 50px;
}


.copyrightBlock {
text-align: center;
padding: 50px;
color: #999;
font-size: 12px;
border-top: 1px solid #ccc;
background: #efefef;
margin-top: 20px;
}


.titleSubText {
display: block;
font-size: 70%;
color: #aaa;
}
div.wrapper:nth-child(2) > h2 {
font-size: 170%;
padding: 20px 0px;
border-top: solid 1px #ddd;
border-bottom: solid 1px #ddd;
text-align: center;
}
.privacyBlock {
width: 1200px;
margin: 50px auto;
}
.privacyBlock > h3 {
margin: 30px 0 15px;
font-size: 120%;
}
.privacyBlock > p {
line-height: 1.8;
color: #666;
}
.footerNavi {
border-top: solid 1px #ddd;
}
.footerNavi ul {
width: 1200px;
margin: 20px auto 0;
height: 17px;
display: flex;
justify-content: center;
align-items: center;
}
.footerNavi ul li {
margin: 0 10px;
display: block;
}
.footerNavi ul li a {
font-size: 90%;
color: #666;
text-decoration: none;
}
.footerNavi ul li a:hover {
color: #ccc;
}
.headerTop > a img {
width: 19%;
}
.any {
display: block;
background-color: #4ec2f0;
border: solid 2px #4ec2f0;
text-shadow: 0px 1px 2px #933;
padding: 2px 5px;
font-size: 10px;
color: #FFF;
float: left;
margin: 0px 5px;
border-radius: 4px;
box-shadow: 0px 0px 5px #CCC;
background-image: url(_images/mfp_header.png);
background-size: 100% 100%;
}
form#mailformpro dl dt span:nth-child(3) {
font-size: 85%;
display: block;
margin-top: 15px;
margin-left: 5px;
}
.mfp_element_select-one,
.mfp_element_textarea {
background: #fff !important;
}
.birthdayBlock .mfp_element_select-one {
width: 29.333% !important;
}






@media screen and (max-width:1200px) {

.headerTop > img:nth-child(1) {
width: 25%;
margin-left: 10px;
}
.headerTop > ul {
width: 40%;
text-align: right;
}
.headerTop > ul li {
width: 47%;
}
.headerTop > a img:nth-child(1) {
width: 200px;
}
.entryBlock {
padding: 20px 0 20px;
}
.entryBlock .wrapper > p img:nth-child(1) {
float: none;
padding-top: 20px;
margin-top: 0;
}
.entryBlock .wrapper  p {
margin-bottom: 10px;
padding-top: 0px;
text-align: center;
}
.entryBlock .wrapper ul {
float: none;
width: 90%;
margin: 0 auto;
}
.entryBlock .wrapper ul li {
text-align: center;
float: left;
width: 50%;
}
.block2 {
width: 100%;
}
.wrapper {
width: 100%;
padding: 0;
}
.wrapper2 {
width: 100%;
padding: 0 20px;
}
.ankenBlock .boxBg::after {
top: 2%;
left: 15%;
}
.headerWrapper {
width: 100%;
}
.mainVisual .leftBlock > img:nth-child(1) {
width: 33%;
}
.mainVisual .leftBlock > img:nth-child(2) {
width: 60%;
}
.mainVisual .rightBlock > img:nth-child(1) {
width: 90%;
}
.mainVisual .rightBlock > img:nth-child(2) {
width: 45%;
top: 30px;
left: 27vw;
}
.headerBg {
height: 71vw;
}
.mainVisualBottom {
padding-top: 26vw;
bottom: 24vw;
}
.mainVisualBottom > img:nth-child(1) {
bottom: 16vw;
}
.block2 > img {
width: 8%;
}
.block2 > .leftBlock {
width: 45%;
}
.block2 > .rightBlock {
left: 70px;
}
.block2 > .leftBlock:nth-child(2) > p:nth-child(1) {
font-size: 2.3vw;
}
.block2 > .leftBlock:nth-child(2) > p:nth-child(2) {
font-size: 2.3vw;
}
.block2 > .rightBlock:nth-child(3) > img {
width: 40%;
left: 133px;
}
.formBlock > h3 {
margin: 100px 0 10px;
}
.privacyBlock {
width: 100%;
padding: 0 25px;
}
.footerNavi ul {
width: 100%;
margin: 20px auto;
}
.headerPrivacy {
height: 90px;
}
.block1 > img:nth-child(1) {
width: 75%;
}
.block1 > img:nth-child(2) {
width: 90%;
}
.freelanceBlock .box {
height: 40vw;
}
.freelanceBlock .box p {
line-height: 2.5vw;
font-size: 1.4vw;
margin: 0 3.2vw;
top: 52%;
}


}



@media screen and (max-width:1100px) {

.freelanceBlock .box p {
top: 57%;
}

}



@media screen and (max-width:1000px) {

header {
height: 68vw;
}
.headerBg {
height: 75vw;
}
.block2 {
height: 750px;
}
.block3 {
width: 100%;
}
.copyrightBlock {
margin-top: 0px;
}
.headerTop > a img:nth-child(1) {
width: 25%;
}
.mainVisual {
padding-top: 160px;
}
.mainVisualBottom {
bottom: 22vw;
padding-top: 26vw;
}
.mainVisualBottom > img:nth-child(1) {
width: 90%;
bottom: 16vw;
}
.wrapper2 {
width: 100%;
padding: 0 20px;
}
.ankenBlock .boxBg {
width: 23%;
margin-right: 3vw;
}
.ankenBlock .boxBg .box {
font-size: 1.5vw;
}
.ankenBlock .boxBg .box h3 {
font-size: 2vw;
}
.ankenBlock .boxBg .box .rewardText {
font-size: 2vw;
}
.freelanceBlock .box p {
top: 61%;
}


}


@media screen and (max-width:850px) {

.headerBg {
height: 610px;
}
.mainVisualBottom {
padding-top: 90px;
bottom: 160px;
padding-bottom: 50px;
}
.block2 {
height: 650px;
}
.block2 > .leftBlock {
width: 40%;
}
.block2 > .rightBlock {
left: 70px;
width: 50%;
}
.block2 > .leftBlock:nth-child(2) > p:nth-child(1) {
font-size: 1rem;
}
.formBlock > h3 {
margin: 60px 0 10px;
}
.block2 > img {
top: 80px;
width: 6%;
}
.headerPrivacy {
height: 80px;
}
.headerTop {
max-width: 100%;
}
.headerTop > ul {
width: 50%;
}
.mainVisual {
padding-top: 140px;
}
.mainVisualBottom {
padding-top: 120px;
bottom: 25vw;
}
.mainVisualBottom > img:nth-child(1) {
bottom: 40px;
}
.wrapper2 {
width: 100%;
padding: 0 20px;
}
header {
height: 70vw;
}


}


@media screen and (max-width:650px) {

.headerBg {
height: 510px;
}
.block2 {
height: 500px;
}
.block2 > .leftBlock {
width: 45%;
left: 40px;
}
.block2 > .rightBlock {
left: 10px;
width: 39%;
}
.block2 > .rightBlock:nth-child(3) > img {
left: 100px;
}
.submitBtn {
margin: 50px 0px 50px !important;
padding: 30px 0 !important;
}
.mfp_element_submit {
width: 50% !important;
}
form#mailformpro dl dt {
padding: 20px !important;
}
form#mailformpro dl dt {
margin: 25px !important;
}
.block2 > img {
top: 80px;
}
.block2 > .leftBlock:nth-child(2) > p:nth-child(1) {
font-size: 2.2vw;
}
.block2 > .leftBlock:nth-child(2) > p:nth-child(2) {
font-size: 2.2vw;
margin-top: 20px;
}
.block2 > .rightBlock:nth-child(3) > img {
width: 50%;
}
.headerPrivacy {
height:70px;
}
.headerTop > ul li:nth-child(1) {
margin-right: 10px;
width: 48%;
}
header {
height: 460px;
}
.mainVisualBottom > img:nth-child(1) {
bottom: 10px;
}
.wrapper2 {
width: 100%;
padding: 0 20px;
}


}



@media screen and (max-width:520px) {

.headerTop > ul {
padding-top: 10px;
}
.headerBg {
height: 700px;
}
.mainVisualBottom {
bottom: 120px;
}
.mainVisual .leftBlock > img:nth-child(2) {
top: 60px;
}
.mainVisual .rightBlock > img:nth-child(1) {
top: 5px;
}
.mainVisual .rightBlock > img:nth-child(2) {
width: 54%;
top: 15px;
left: 22vw;
}
.mainVisualBottom > img:nth-child(1) {
bottom: 50px;
width: 95%;
}
.headerBg {
height: 420px;
}
.block2 {
height: 500px;
}
.headerPrivacy {
height:50px;
}
.mainVisual {
padding-top: 100px;
}
.wrapper2 {
width: 100%;
padding: 0 20px;
}
}
.dokidoki{   
    animation-name:dokidoki;	/* アニメーション名の指定 */
    animation-delay:0s;		/* アニメーションの開始時間指定 */
    animation-duration: 3s;	/* アニメーション動作時間の指定 */
    animation-timing-function: ease-in-out;
    /* アニメーションの動き（徐々に早く徐々に遅く）*/
    animation-iteration-count: infinite; /* アニメーションをループさせる */
}
 
@keyframes dokidoki {
    0% {
        transform: scale(1);
    }
 
    40% {
        transform: scale(1);
    }
 
    50% {
        transform: scale(1.1);
    }
    
    60% {
        transform: scale(1);
    }
     
    100% {
        transform: scale(1);
    }
}