@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
/*--------------------------------------------------------------------------
main
--------------------------------------------------------------------------*/
main #visual {
  background-color: #e70616;
  height: 450px;
  overflow: hidden;
  text-align: center;
  width: 100%;
}
  @media screen and (max-width: 1024px) {
    main #visual {
      height: 400px; } }
  @media screen and (max-width: 768px) {
    main #visual {
      height: 150px; } }


main #button .inner {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  padding: 20px 3%;
width: 100%;
text-align: center;}
  main #button .inner h3 {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 0em;
	background:linear-gradient(transparent 60%, #FFF400 60%);
    width: 100%; }
@media screen and (max-width: 1024px) {
      main #button .inner h3 {
        font-size: 30px;
        text-align: center;
        width: 100%; } }

    main #button .inner h3 span {
      transform: scaleX(0.9);
      transform-origin: left top;
      padding: 0 0 0 1.5%;
      width: 110%;
      display: block;
      padding: 5px 0 0; }

  main #button .inner .button {
    background: #fadc00;
    max-width: 300px;
    width: 35%; }
    main #button .inner .button:hover {
      background: #000;
      color: #fff; }
  @media screen and (max-width: 768px) {
    main #button .inner {
      flex-wrap: wrap;
      padding: 10px 3% 30px; }
      main #button .inner .button {
        margin: 10px auto 0;
        width: 100%; } 
      main #button .inner h3 {
        font-size: 25px;}
}
main #blog {
  background:#d6d6d6;
  height: 350px;
  margin: 0;
  position: relative;
  text-align: center; }
  main #blog .inner {
    max-width: none;
    position: absolute;
    top: 10%;
    text-align: center; }
    main #blog .inner h3 {
      filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
      color: #fff;
      font-size: 30px;
      font-weight: 700;
      letter-spacing: 0.2em;
      line-height: 1.5;
      text-align: center;
		margin-bottom: 30px;
      width: 100%; }
    main #blog .inner p {
		width:50%;
		margin: 10px auto;
} 
main #blog .inner p a {
		margin: 0 20px;
}
		
		
		
		main #blog .inner h3 span {
        transform: scaleX(0.9);
        transform-origin: left top;
        padding: 0 0 0 1.5%;
        width: 110%;
        display: block; }


  @media screen and (max-width: 1024px) {
    main #blog {
      height: 300px; }
      main #blog .inner {
        top: 10%; }
        main #blog .inner h3 {
          font-size: 24px; }
    main #blog .inner p {
		width:70%;
		margin: 10px auto;
} 
main #blog .inner p a {
		margin: 0 20px;
}}

@media screen and (max-width: 768px) {
    main #blog {
      margin: 20px 0 0; }
      main #blog .inner {
        top: 10%; }
        main #blog .inner h3 {
          font-size: 18px; }
    main #blog .inner p {
		width:100%;
		margin: 10px auto;
          font-size: 12px;} 
main #blog .inner p a {
		margin: 0 20px;
}}

/*--------------------------------------------------------------------------
concept
--------------------------------------------------------------------------*/

main #concept {
  padding:0; }
  main #concept .concept {
    background-position: center 0;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%; }
    main #concept .concept__left, main #concept .concept__right, main #concept .concept__center {
      padding:4vw 3%;
      width: 50%; }
      main #concept h2 {
        font-size: 25px;
        font-weight: 500;
        text-align: left; }
        main #concept h2 span {
          transform: scaleX(0.9);
          transform-origin: left top;
          padding: 0 0 0 1.5%;
          width: 110%;
          display: inline-block;
          padding: 0; }
      main #concept p {
        font-size: 15px;
        margin: 1.5vw 0 1.5vw;
        text-align: left; }
      main #concept .button {
        background: #fadc00;
        margin: 30px auto 0; }
        main #concept .button:hover {
          background: #000;
          color: #fff; }
    main #concept .concept__left {
      padding-left: 0;
      text-align: right; }
    main #concept .concept__right {
      margin: 0 0 0 50%;
      padding-right: 0;
      width: 48.5%; }
    main #concept .concept__center {
      margin: 0 25%;
      padding-right: 0;
      width: 48.5%; }

main #concept .concept__koen {
      margin: 0 15%;
      padding-right: 0;
      width: 68.5%; }

main #concept .concept__center h2 span {
	  border-top: 1px solid #000; 
	  border-bottom: 1px solid #000;}
main #concept .concept__center h3 {
	  font-size: 150%; 
	  font-weight: 700;
	  background: #e70616;
	  color: #fff;
	  padding: 3px 10px;
border-radius: 5px;}
main #concept .concept__center ul li {
	  font-size: 120%; 
	  font-weight: 700;
	  color: #e70616;}

  main #concept__1 {
    background-image: url(../../img/home1_img.jpg); }
  main #concept__2 {
    background-image: url(../../img/home2_img.jpg); }
  main #profile__1 {
    background-image: url(../../img/profile1_img.jpg); 
    background-position: center;}
  main #profile__2 {
    background-image: url(../../img/profile2_img.jpg);}
  main #profile__3 {
    background-image: url(../../img/profile3_img.jpg); } 
  main #profile__4 {
    background-image: url(../../img/profile4_img.jpg); }
  main #profile__5 {
    background-image: url(../../img/profile5_img.jpg); }
  main #profile__6 {
    background-image: url(../../img/profile6_img.jpg); }
  main #profile__7 {
    background-image: url(../../img/profile7_img.jpg); }
  main #profile__8 {
    background-image: url(../../img/profile8_img.jpg); }
  main #profile__9 {
    background-image: url(../../img/profile9_img.jpg); }
  main #profile__10 {
    background-image: url(../../img/profile10_img.jpg); }
  main #rinen__1 {
    background-image: url(../../img/rinen1_img.jpg); 
    background-position: center;}
  main #rinen__2 {
    background-image: url(../../img/rinen2_img.jpg);}
  main #rinen__3 {
    background-image: url(../../img/rinen3_img.jpg); } 
  main #rinen__4 {
    background-image: url(../../img/rinen4_img.jpg); }


  @media screen and (max-width: 1024px) {
    main #concept {
      padding:0; }
      main #concept h2 {
        font-size: 20px; }
      main #concept p {
        font-size: 10px; }
      main #concept .button {
        margin: 30px auto 0; } }
  @media screen and (max-width: 768px) {
    main #concept {
      padding:0; }
      main #concept .concept {
        background-position: center 0;
        background-repeat: no-repeat;
        background-size: cover;
        margin: 0 0 20px 0;
        width: 100%; }
        main #concept .concept img {
          height: auto;
          width: 100%; }
        main #concept .concept__left, main #concept .concept__right, main #concept .concept__center, main #concept .concept__koen {
          margin: 0;
          padding: 5vw 0;
          text-align: center;
          width: 100%; }
          main #concept .concept h2 {
			  font-size: 14px;
            text-align: center;}
            main #concept h2 span {
              transform: scaleX(0.9);
              transform-origin: left top;
              display: inline-block; 
	  border-top: 1px solid #000; 
	  border-bottom: 1px solid #000;}
	  main #concept p {
            display: block;
            font-size: 11px;
            margin: 10px 0 0;
            text-align: center; }
          main #concept .button {
            background: #fadc00;
            margin: 20px auto 0; }
        main #concept .concept .right {
          text-align: center; }
      main #concept__1, main #concept__2, main #profile__1, main #profile__2, main #profile__3, main #profile__4, main #profile__5, main #profile__6, main #profile__7, main #profile__8, main #profile__9, main #profile__10 {
        background: #fff; } }


span.magic_line {background:linear-gradient(transparent 60%, #FFF400 60%);}

.red-arrow {
	display: block;
	width: 10% !important;
margin: 0 auto;}
.reason {
	background: #d6d6d6;
	margin:25px 0 0 !important;
padding: 5px 10px;
border-radius: 5px;}

.reason-box {
	margin:0 0 100px !important;}


/*
----------------------------------------
form
----------------------------------------
*/


main #concept .concept__koen dl {
 display: flex;
 flex-wrap: wrap;
 width: 100%;}
main #concept .concept__koen dl dt {
 width: 30%;
border-bottom: 1px solid #fff;
padding: 10px;
background: #e70616;
color: #fff;
font-weight: 700;}
main #concept .concept__koen dl dd {
 width: 70%;
border-bottom: 1px solid #838383;
padding: 10px;
background: #E8E8E8;}
main #concept .concept__koen dl dt.family-name {
	background: #FA6062;
}
@media screen and (max-width: 768px) {
main #concept .concept__koen dl {
 display:block;
 width: 100%;}	
main #concept .concept__koen dl dt {
 width: 100%;}
main #concept .concept__koen dl dd {
 width:100%;}
}

.submit-box {
	width: 100%;
	margin: 10px auto 50px;
	text-align: center;
}
textarea {
	width: 100%;  /* 横幅 */
	height: 150px; /* 高さ */
}
.req-label {
	border-radius: 3px;
	background: #fadc00;
	color:#000;
	padding: 0 3px;
	font-size: 80%;
	margin-right: 10px;
}
/*--------------------------------------------------------------------------
footer
--------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  footer {
    margin: 0; } }