/* CSS Document */
/*---------------
	CONTACT
---------------*/
#contact {
  background: #f2f2f3; }
  #contact .contents-area {
    width: 1200px;
    padding: 70px 0 120px;
    margin: 0 auto; }
    @media only screen and (max-width: 1199px) {
      #contact .contents-area {
        width: auto;
        max-width: 800px;
        padding: 60px 2%;
        margin: 0 auto; } }
    #contact .contents-area h3 {
      color: var(--text-color);
      font-size: 4em;
      margin-bottom: 1em; }
      @media only screen and (max-width: 1199px) {
        #contact .contents-area h3 {
          font-size: 3em; } }
    #contact .contents-area .explan {
      font-size: 2.5em;
      line-height: 2; }
      @media only screen and (max-width: 1199px) {
        #contact .contents-area .explan {
          font-size: 1.8em;
          line-height: 1.5; } }
    #contact .contents-area .content h4 {
      color: var(--text-color);
      font-size: 3em;
      line-height: 1.2;
      letter-spacing: .1em;
      border-bottom: 1px solid #6185bc;
      margin: 50px 0 20px;
      position: relative; }
      @media only screen and (max-width: 1199px) {
        #contact .contents-area .content h4 {
          font-size: 2em; } }
      #contact .contents-area .content h4 .number {
        color: #6185bc;
        font-size: 2em;
        font-weight: 600;
        letter-spacing: .1em;
        margin-right: 5px; }
      #contact .contents-area .content h4 .note {
        color: #f00;
        font-size: .5em;
        position: absolute;
        right: 0;
        bottom: .5em; }
        @media only screen and (max-width: 1199px) {
          #contact .contents-area .content h4 .note {
            font-size: .6em;
            bottom: -1.8em; } }
    #contact .contents-area .content .cont__box {
      width: 1000px;
      margin: 0 auto;
	  position: relative; }
      @media only screen and (max-width: 1199px) {
        #contact .contents-area .content .cont__box {
          width: auto; } }
      #contact .contents-area .content .cont__box.cont__box--grid {
        display: grid;
        grid-template-columns: 1fr 1fr; }
      #contact .contents-area .content .cont__box dl {
        display: grid;
        grid-template-columns: 130px 1fr;
        color: var(--text-color);
        font-size: 1.8em; }
        @media only screen and (max-width: 1199px) {
          #contact .contents-area .content .cont__box dl {
            display: block;
            font-size: 1.6em; } }
        #contact .contents-area .content .cont__box dl dt {
          padding: 25px 0;
          margin-bottom: 15px; }
          @media only screen and (max-width: 1199px) {
            #contact .contents-area .content .cont__box dl dt {
              padding: 0; } }
        #contact .contents-area .content .cont__box dl dd {
			position: relative; }
			@media only screen and (max-width: 1199px) {
			  #contact .contents-area .content .cont__box dl dd {
				margin-bottom: 15px; } }
        #contact .contents-area .content .cont__box dl dd span {
          margin: 0 30px; }
          @media only screen and (max-width: 1199px) {
            #contact .contents-area .content .cont__box dl dd span {
              margin: 0 10px; } }
        #contact .contents-area .content .cont__box dl dd select {
          font-size: .9em;
          padding: 24px;
          border: none;
          border-right: 1em solid #fff; }
          @media only screen and (max-width: 1199px) {
            #contact .contents-area .content .cont__box dl dd select {
              padding: 5px;
              margin-bottom: 10px; } }
      #contact .contents-area .content .cont__box .email {
        font-size: 1.8em; }
      #contact .contents-area .content .cont__box input {
        font-size: 1em;
        padding: 25px;
        border: none; }
        #contact .contents-area .content .cont__box input::placeholder {
          color: #ccc; }
        @media only screen and (max-width: 1199px) {
          #contact .contents-area .content .cont__box input {
            padding: 5px; } }
      #contact .contents-area .content .cont__box .big {
        width: 88.5%;
        margin: 10px 0; }
      #contact .contents-area .content .cont__box .mid {
        width: 60%; }
      #contact .contents-area .content .cont__box .sml {
        width: 20%; }
      #contact .contents-area .content .cont__box .post {
        color: #999;
        line-height: 1.5;
        margin: 0 0 25px 130px; }
        @media only screen and (max-width: 1199px) {
          #contact .contents-area .content .cont__box .post {
            font-size: 1.4em;
            line-height: 1.5;
            margin: 1em 0 2em; } }
      #contact .contents-area .content .cont__box .half {
        width: 930px;
        text-align: right;
        color: #999;
        font-size: 1.6em; }
        @media only screen and (max-width: 1199px) {
          #contact .contents-area .content .cont__box .half {
            width: auto;
            text-align: left;
            font-size: 1.4em; } }
      #contact .contents-area .content .cont__box textarea {
        width: calc(100% - 50px);
        max-width: 950px;
        font-size: 1rem;
        line-height: 1.5;
        padding: 25px;
        border: none; }
        #contact .contents-area .content .cont__box textarea::placeholder {
          color: #ccc; }
        @media only screen and (max-width: 1199px) {
          #contact .contents-area .content .cont__box textarea {
            margin-top: 10px; } }
    #contact .contents-area .content .agree {
      text-align: center;
      font-size: 1.8em;
      margin-top: 75px; }
      @media only screen and (max-width: 1199px) {
        #contact .contents-area .content .agree {
          font-size: 1.6em;
          margin-top: 60px; } }
      #contact .contents-area .content .agree input {
        margin-right: .5em; }
      #contact .contents-area .content .agree .agr {
        text-decoration: underline;
        color: #f00; }
        #contact .contents-area .content .agree .agr:hover {
          text-decoration: none; }
      #contact .contents-area .content .agree .btn {
        display: block;
        width: 340px;
        background: #6c84b9;
        color: #fff;
        line-height: 2.8;
        margin: 30px auto 0;
        position: relative; }
        #contact .contents-area .content .agree .btn img {
          width: 30px;
          position: absolute;
          top: 10px;
          right: 15px; }
        #contact .contents-area .content .agree .btn:hover {
          opacity: .8; }
	#contact .contents-area .content .wpcf7-not-valid-tip { 
		margin: 0!important;
		position: absolute;
		left: .3em;
		bottom: 1.1em;
		font-size: 14px; }
	@media only screen and (max-width: 1199px) {
		#contact .contents-area .content .wpcf7-not-valid-tip {
			top: auto;
			left: 0;
			bottom: auto;
			font-size: 12px; } }