@charset "UTF-8";
/* 変数 */
html {
	font-size: 62.5%;
	scroll-behavior: smooth;
}

body {
	background: #ffffff;
	font-family: 'M PLUS Rounded 1c', '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', sans-serif;
	font-size: 1.6rem;
  letter-spacing: 0.1em;
}

*{transition: all 0.3s;}

/* 共通 */
.wrapper_c, .wrapper_w {
	width: auto;
	max-width: 980px;
  margin-left: auto;
  margin-right: auto;
	padding: 60px 80px;
	position: relative;
}

.sp_only {
	display: none !important;
}

/* モーダル */
.no_scroll {
	overflow: hidden;
}

.fade {
	opacity: 0;
	-webkit-transform: translate(0, 150px);
		transform: translate(0, 150px);
	-webkit-transition: .6s;
		transition: .6s;
}

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

/* header */
header {
	/* background: #403e3e; */
	/* background: linear-gradient(-225deg, #C0F1F8 0%, #EADEF8 56%, #F8E5EF 100%); */
}

.header_content {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
		-webkit-box-pack: justify;
		-webkit-justify-content: left;
		-ms-flex-pack: justify;
			/* justify-content: left; */
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
			align-items: baseline;
	width: 100%;
	/* height: 400px; */
	max-width: 1000px;
	margin: 0 auto;
	padding: 20px;
}

.header_content img {
	width: 360px;
  height: auto;
}

/* main */
.main {
  text-align: center;
}

.main_hero {
	position: relative;
	width: 100%;
	max-width: 980px;
  line-height: 1.4;
	margin: 0 auto;
	margin-top: 50px;
  margin-bottom: 50px;
}

.main_hero h3{
  font-weight: 500;
  font-size: 1.8em;
  letter-spacing: 0.2em;
  margin-bottom: 10px;
  clip-path: inset(0 100% 0 0);
  display: inline-block;
  transition: 0.6s 0.2s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
}
.main_hero h1{
  font-weight: 700;
  font-size: 5.8em;
  line-height: 1.1;
  letter-spacing: 0.15em;
  font-family: 'Roboto', sans-serif;
  clip-path: inset(0 100% 0 0);
  display: inline-block;
  transition: 0.6s 0.4s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
}
.main_hero.effect-scroll h3,
.main_hero.effect-scroll h1,
.main_hero.effect-scroll .main_content_bg,
section.impact.effect-scroll h4,
section.flow.effect-scroll h4{
  clip-path: inset(0);
}
.main_hero h1 span{
  display: block;
  margin-bottom: 20px;
}
.main_hero h1 span.sub{
  font-size: 0.5em;
  letter-spacing: 0.12em;
}
.main_hero h1 span.txt_ja{
  position: relative;
  font-size: 0.3em;
  letter-spacing: 0.25em;
  font-family: 'M PLUS Rounded 1c', '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', sans-serif;
  ont-weight: 500;
  background: #ebab41;
  padding: 12px 35px;
  border-radius: 40px;
  color: #ffffff;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}
.main_content_inner{
  width: 100%;
  /*border: 6px solid #444444;*/
  background: #ffffff;
  padding: 50px 0;
  position: absolute;
  z-index: 10;

  background-image: 
    linear-gradient(00deg, #444444, #444444),
    linear-gradient(00deg, #444444, #444444),
    linear-gradient(00deg, #444444, #444444),
    linear-gradient(00deg, #444444, #444444);

  background-repeat: no-repeat;

  background-size: 5px 100%, 100% 5px, 5px 100%, 100% 5px;
  background-position: left bottom, left top, right top, right bottom;

  animation: square_anim 1s linear forwards;
}

@keyframes square_anim{
  00%{
    background-size: 
      5px 0, 0 5px,
      5px 0, 0 5px; 
  }
  25%{
    background-size: 
      5px 100%, 0 5px,
      5px 0, 0 5px;
  }
  50%{
    background-size: 
      5px 100%, 100% 5px,
      5px 0, 0 5px;
  }
  75%{
    background-size: 
      5px 100%, 100% 5px,
      5px 100%, 0 5px;
  }
  100%{
    background-size: 
      5px 100%, 100% 5px,
      5px 100%, 100% 5px;
  }
}

.main_content_bg{
  position: relative;
  display: block;
  right: -22px;
  bottom: -22px;
  width: 100%;
  height: 440px;
  background-image:  radial-gradient(#ffc107 2px, transparent 2px), radial-gradient(#ffc107 2px, #ffffff 2px);
  background-size: 20px 20px;
  background-position: 0 0,10px 10px;
  clip-path: inset(0 100% 0 0);
  transition: 1s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
}

.wrapper_w{
  background: #fff;
  text-align: center;
  background: #ffffff;
  padding: 50px;
  z-index: 10;
}
.effect-scroll .wrapper_w{
  background-image: 
    linear-gradient(00deg, #444444, #444444),
    linear-gradient(00deg, #444444, #444444),
    linear-gradient(00deg, #444444, #444444),
    linear-gradient(00deg, #444444, #444444);

  background-repeat: no-repeat;

  background-size: 5px 100%, 100% 5px, 5px 100%, 100% 5px;
  background-position: left bottom, left top, right top, right bottom;

  animation: square_anim 1.5s linear forwards;
}

.wrapper_w h2{
  display: inline-block;
  color: #ffc107;
  font-weight: 500;
  text-align: center;
  font-size: 3.4rem;
  letter-spacing: 0.1em;
  line-height: 4.8rem;
  margin-bottom: 30px;
  padding-bottom: 5px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.wrapper_w h2:after{
  position: absolute;
  display: inline-block;
  left: 0;
  content: '';
  width: 100%;
  height: 4px;
  background: #ffc107;
  bottom: -1px;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform 0.5s 0.5s;
}

.effect-scroll .wrapper_w h2:after{
  transform: scale(1, 1);
}

.wrapper_w p,
.wrapper_w h3,
.wrapper_w h4{
  font-size: 1.2em;
  line-height: 1.6;
  margin-bottom: 25px;
}
.wrapper_w li{
  text-align: left;
  font-size: 1.2em;
  line-height: 1.6;
  margin-bottom: 15px;
}


section.task .img{
  position: absolute;
  right: 200px;
  margin-top: -160px;
}
section.task p{
  margin-bottom: 0;
}
section.task ul{
  max-width: 580px;
  margin: 0 auto;
}
section.task ul li{
  padding-left: 35px;
  background: url(../img/icon_task.svg) no-repeat 0 0;
  background-size: 28px auto;
}

section.fade{
  padding: 50px 0;
  margin: 80px auto;
}
section.task{
  margin-bottom: 0;
}
section.impact{
  margin-top: 0;
  background-image:  radial-gradient(#ffc107 2px, transparent 2px), radial-gradient(#ffc107 2px, #ffffff 2px);
  background-size: 30px 30px;
  background-position: 0 0,15px 15px;
  margin-bottom: 0;
}
section.impact h2,
section.flow h2{
  font-size: 1.7em;
  margin-bottom: 15px;
}
section.impact p,
section.flow p{
  text-align: left;
  font-size: 1em;
  line-height: 1.6;
  margin-bottom: 35px;
}
section.impact h4{
  font-size: 1.2em;
  background: #ffc107;
  display: block;
  padding: 7px 25px;
  border-radius: 40px;
  color: #ffffff;
  font-weight: 500;
  margin-bottom: 15px;
  clip-path: inset(0 100% 0 0);
  transition: 0.6s 0.4s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
}
section.flow h4{
  font-size: 1.2em;
  background: #ffc107;
  display: block;
  padding: 7px 25px;
  border-radius: 40px;
  color: #ffffff;
  font-weight: 500;
  margin-bottom: 15px;
  clip-path: inset(0 100% 0 0);
  transition: 0.6s 0.8s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
}
section.flow .img{
  max-width: 640px;
  margin: 0 auto;
}
section.flow .txt_s{
  max-width: 640px;
  margin: 0 auto 20px;
  font-size: 0.8em;
}
section.flow p span{
  border-bottom: 3px solid #ffc107;
  font-weight: 500;
}

.task{
  background-image:
    repeating-linear-gradient(to bottom,
      transparent 25px,
      rgba(0, 0, 0, 0.1) 26px,  rgba(0, 0, 0, 0.1) 26px,
      transparent 27px,  transparent 51px, 
      rgba(0, 0, 0, 0.1) 52px,  rgba(0, 0, 0, 0.1) 52px,
      transparent 53px,  transparent 77px, 
      rgba(0, 0, 0, 0.1) 78px,  rgba(0, 0, 0, 0.1) 78px,
      transparent 79px,  transparent 103px, 
      rgba(0, 0, 0, 0.1) 104px,  rgba(0, 0, 0, 0.1) 104px,
      transparent 105px,  transparent 129px, 
      rgba(0, 0, 0, 0.1) 130px,  rgba(0, 0, 0, 0.1) 130px),

    repeating-linear-gradient(to right,
      transparent 25px,
      rgba(0, 0, 0, 0.1) 26px,  rgba(0, 0, 0, 0.1) 26px,
      transparent 27px,  transparent 51px, 
      rgba(0, 0, 0, 0.1) 52px,  rgba(0, 0, 0, 0.1) 52px,
      transparent 53px,  transparent 77px, 
      rgba(0, 0, 0, 0.1) 78px,  rgba(0, 0, 0, 0.1) 78px,
      transparent 79px,  transparent 103px, 
      rgba(0, 0, 0, 0.1) 104px,  rgba(0, 0, 0, 0.1) 104px,
      transparent 105px,  transparent 129px, 
      rgba(0, 0, 0, 0.1) 130px,  rgba(0, 0, 0, 0.1) 130px);
}

section.flow{
  background: repeating-linear-gradient( 45deg, #f5d5a0, #f5d5a0 2px, #ffffff 2px, #ffffff 16px );
  margin: 0;
}
section.flow .img_pic{
  text-align: center;
  display: flex;
  max-width: 570px;
  margin: 0 auto 50px;
}
section.flow .img_pic li{
  margin: 0 20px;
}

section.support{
  background: #f9e6c6;
  margin: 0;
  padding: 70px 0;
  background-image:  radial-gradient(#ffffff 2px, transparent 2px), radial-gradient(#ffffff 2px, #f9e6c6 2px);
  background-size: 20px 20px;
  background-position: 0 0,10px 10px;
}
section.support .wrapper_w h2{
  margin-bottom: 10px;
  font-size: 3.0rem;
}
section.support .wrapper_w p{
  margin-bottom: 0;
  padding-bottom: 0;
}
.inquiry .wrapper_c{
  margin: 0;
  padding: 30px 0;
}
.inquiry_content a{
  display: inline-block;
  background: #ffc107;
  padding: 7px 0;
  width: 300px;
  font-weight: 500;
  font-size: 1.6em;
  color: #ffffff;
  letter-spacing: 0.15em;
  border-radius: 8px;
  background-repeat: no-repeat;
    background-position: 100% 0;
    background-size: 200% auto;
    background-image: linear-gradient(
    to right,
    #ffd200 0%,
    #ffd200 50%,
    #ffc107 50%,
    #ffc107 100%
    );
    box-shadow: 0 3px 10px rgb(0 0 0 / 16%);
    transition: background-position ease 0.25s;
    border: 4px solid #444444;
}
.inquiry_content a:hover{
    background-position: 0 0;
}



/* footer */
footer {
  background: #403e3e;
}

.footer_content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

.footer_content ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.footer_content li {
  color: #fff;
  font-size: 1.7rem;
  font-weight: bold;
  margin-right: 24px;
  white-space: nowrap;
}

.footer_content li:hover {
  color: #89c4ff;
}

.footer_content img {
  width: 360px;
  height: auto;
}

@media screen and (max-width: 980px) {
  .main_content_inner,
  .wrapper_w{
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
  }
  .main_content_bg{
    width: 90%;
    margin-left: 5%;
  }
  section.task .img {
    right: 15%;
  }
}


@media screen and (max-width: 768px) {
.pc_only {
    display: none;
}

.sp_only {
    display: block !important;
}

body{
  font-size: 1.4em;
}
.main_hero {
  margin-top: 30px;
  margin-bottom: 0;
  padding-bottom: 0;
}
.main_hero h3 {
  font-size: 1.4em;
}
.main_hero h1 {
  font-size: 3.4em;
}
.main_hero h1 span.txt_j{
  margin-bottom: 0;
}
.main_content_inner {
  padding-top: 35px;
  padding-bottom: 20px;
}
.main_content_bg {
  height: 280px;
}
.wrapper_w{
  padding: 30px 10px;
}
.wrapper_w h2,
section.support .wrapper_w h2 {
  font-size: 1.8em;
  line-height: 1.4;
}
figure{
  margin-left: 0;
  margin-right: 0;
}
section.support .wrapper_w p{
  font-size: 1em;
}
section.fade.task {
    padding: 30px 0;
    margin: 40px auto 0;
}
section.task .img {
    right: 5%;
}
section.flow .img,
section.flow .txt_s{
  width: calc(100% - 20px);
  margin-left: 10px;
  margin-right: 10px;
}
.inquiry_content a{
  width: 280px;
}

  .footer_content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-justify-content: space-around;
        -ms-flex-pack: distribute;
            justify-content: space-around;
    height: 160px;
  }
  .footer_content ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .footer_content li {
    color: #fff;
    font-size: 2rem;
    font-weight: bold;
    margin-right: 24px;
  }
  .footer_content li:hover {
    color: #89c4ff;
  }
  .header_content img,
  .footer_content img  {
    width: 240px;
    height: auto;
  }
}

@media screen and (max-width: 580px) {
  section.task ul {
    padding-left: 10px;
  }
section.task ul li:nth-child(4){
  display: inline-block;
  padding-right: 55px;
}
}
@media screen and (max-width: 390px) {
  .main_hero h3 {
    font-size: 1.1em;
    letter-spacing: 0.1em;
  }
  .main_hero h1 span.txt_ja{
    padding-left: 20px;
    padding-right: 20px;
  }
  .wrapper_w h2, section.support .wrapper_w h2,
  section.impact h2 {
      font-size: 1.4em;
  }
  section.task .img {
    margin-top: -130px;
  }
  section.task p{
    font-size: 1em;
    margin-left: 0;
    margin-right: 0;
  }
  .footer_content li {
    font-size: 1.2em;
  }
}