@charset "UTF-8";

body{
  color:#333;font-family:游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",
  HGS明朝E,メイリオ,Meiryo,serif;text-align: center;}
/*===========================================================================
       header
============================================================================*/
.header_contact{width: 100%;height:0px;background-color:darkgreen;}
/* 文字「お問い合わせ 」　*/
.pageTitle{
  width: 100%;height:60px;
  padding:10px 0;text-align:center;background:darkgreen;
  color:#fff;font-size:28px;}
/* 文字「CONTACT 」　*/
.pageTitle span{color:tan;font-size:14px;margin-left: 10px;}

/* 入力フォーム メッセージ本文　　縦スクロールできるようにする　*/
form input,form textarea{
  -webkit-box-sizing:border-box!important;-o-box-sizing:border-box!important;
  -ms-box-sizing:border-box!important;box-sizing:border-box!important}
/* 入力フォームの WRAP　上下のアキ margin-top: 10px;margin-bottom: 10px */
.container{
  width:800px;padding-right:15px;padding-left:15px;
  margin: 10px auto 0;}

/* 入力フォームの大きさ　フォーム間のアキ:元　padding:15px;　10/1変更*/
.form .form_row{
  padding:10px;width:100%;text-align: left;
  display:-ms-flexbox;display:flex;-js-display:flex}

/* 文字　「お名前」「メールアドレス」「メッセージ本文」　*/
.form .form_row .form_label{width:200px;margin-top:0px;font-size:14px;}
/* 文字「　必須 」　*/
.form .form_row .form_label span{
  color:darkorange;border:1px solid darkorange;
  padding:2px 5px;margin-left:20px;font-size:12px;}
.form .form_row .form_content{width:calc(100% - 200px)}
/* 入力ボックス　元　padding:15px 10px;　10/1変更*/
.form .form_row .form_content input,.form .form_row .form_content textarea{
  width:100%;padding:12px 10px;border-radius:5px 5px 5px 5px!important;
  border:1px solid #70462E;}
/* 入力ボックス　メッセージ　元　min-height:200px;　10/1変更*/
.form .form_row .form_content textarea{min-height:180px;}
.form .form_row .form_content.form_content-tel input{width:6em;}

/* フォーム内に入力するテキストのサイズ　*/
button,input,select,textarea{
 font-family:arial,helvetica,clean,sans-serif;font-size:14px;}

/* ボタンのスペース　*/
.form .form_row-center{
  -webkit-box-pack:center;-ms-flex-pack:center;
  justify-content:center;margin:-10px 0 10px;}
/* ボタン　「確認画面へ」*/
.btn{display:block;cursor:pointer;font-size:16px;
  line-height:1;text-align:center;text-decoration:none;
  border-radius:5px 5px 5px 5px!important;
  padding:15px;margin:0}
.btn-send{font-weight:bold;
  background-color:darkgreen!important;color:#fff!important;
  margin:0px 0 10px;}
/* ボタン　「戻る」*/
.btn-back{background-color:#eee!important;color:#333!important;
  margin:-10px 0 0px;font-size:14px;}
.btn:hover{opacity:0.8;}
/*=============================================================================
          footer  　
==============================================================================*/
.footer_contact{text-align:center;margin-top:20px;}
/*ボタン　「HOMEに戻る」　　*/
a{text-decoration: none;}
.footer_contact a{
  border: 2px solid darkgreen;border-radius: 5px;
  background:white;color:darkgreen;
  width: 200px;
  padding: 5px 20px;
  font-size: 16px;}
.footer_contact a:hover{background: yellow;}
/*========= 波紋　=============================================================*/
.hamon img{border-radius: 50%;width:40px;height: 40px;margin-top: 15px;}
.hamon img{box-shadow:0px 0px 30px 30px rgba(256,256,256,0%);}
/*========= 波紋を付ける　=====================================*/
.hamon{top:15px;/*配置する位置*/
         position: relative;/*波紋の基点とするためrelativeを指定*/
         display:inline-block;
         width:40px;height:40px;/*画像と同じ大きさにする*/
         border-radius: 50%;
         outline: none;transition: all .3s;}
/*波形を2つ設定*/
.hamon::after,.hamon::before {
         content: '';
         position: absolute;left: -24%;top: 4%;
         /*波形の形状*/
         border: 1px solid darkgreen;/*線の色*/
         width: 150%;height: 150%;border-radius: 50%;
         opacity: 1;/*はじめは不透明*/
         animation:1s circleanime linear infinite;}
/*波形の2つ目は0.5秒遅らせてアニメーション*/
.hamon::before {animation-delay:.5s;}
/*波形のアニメーション*/
@keyframes circleanime{
    0%{
      transform: scale(0.68);
    }
    100%{
      transform: scale(1.2);
      opacity: 0;
    }
  }

/*===================================================================================================
       レスポンシブ
  ========================================================================================================*/
@media only screen and (max-width:1140px){
.container{width:800px;}
}
@media only screen and (max-width:960px){
.container{width:700px;}
}
@media only screen and (max-width:767px){
.container{width:450px;}
/* 文字「お問い合わせ 」　*/
.pageTitle{
  width: 100%;height:50px;
  padding:10px 0;font-size:18px;}
/* 文字「CONTACT 」　*/
.pageTitle span{font-size:14px;}
/* 入力フォームの大きさ　*/
.form_row{flex-direction: column;}
.form .form_row{padding:10px 0px 0 0px;}
/* 文字　「お名前」「メールアドレス」「メッセージ本文」　*/
.form .form_row .form_label{font-size:14px;margin-top:0px}
/* 文字　「必須」　*/
.form .form_row .form_label span{font-size:12px;}
.form .form_content{margin-top:5px}
.form .form_row .form_content input,.form .form_row .form_content textarea{
  width:420px;padding:10px 10px;border-radius:5px 5px 5px 5px!important;
  border:1px solid #70462E;}
.form .form_row-center{margin-top: 5px;}
.btn{font-size:12px}
/* ボタン　「確認画面へ」*/
.btn-back{background-color:#eee;color:#333;font-size:14px;}
}
@media only screen and (max-width:555px){
.container{width:340px;}
/* 入力フォームの大きさ　*/
.form .form_row{padding:10px 0px 0 0px;}
/* 入力ボックス　*/
.form .form_row .form_content input,.form .form_row .form_content textarea{
  width:300px;padding:15px 10px;}
.form{padding:0px 0px 0 0px;width:300px;}
/* 文字　「お名前」「メールアドレス」「メッセージ本文」　*/
.form .form_row .form_label{font-size:14px;margin-top:0px}
/* 文字　「必須」　*/
.form .form_row .form_label span{font-size:12px;}
.form .form_content{margin-top:5px}
/* ボタンのスペース　*/
.form .form_row-center{margin:5px 0 10px;}
/* ボタン　「確認画面へ」*/
.btn{width: 100%;padding:15px;font-size:15px;}
  .btn-send{margin:0px 0 10px;}
/* ボタン　「戻る」*/
.btn-back{font-size:14px;}
  .btn-back{margin:0px 0 10px;font-size:14px;}
/*ボタン　「HOMEに戻る」　　*/
.footer_contact a{width: 150px;
  border-radius: 5px;margin:-40px auto 10px;padding: 5px 20px;
  font-size: 16px;}
}

@media only screen and (max-width:420px){
.header_contact{width: 100%;height: 0px;}
/* 文字「お問い合わせ 」　*/
.pageTitle{
  width: 100%;height:50px;
  padding:12px 0;font-size:18px}
/* 文字「CONTACT 」　*/
.pageTitle span{font-size:12px;}
.container{width:320px;}
/* 入力フォームの大きさ　*/
.form .form_row{padding:8px 0px 0 0px;}
/* 入力ボックス　*/
.form .form_row .form_content input,.form .form_row .form_content textarea{
  width:290px;padding:15px 10px;}
.form{padding:0px 0px 0 0px;width:300px;}
.form .form_row .form_content textarea{min-height:176px;}
/* 文字　「お名前」「メールアドレス」「メッセージ本文」　*/
.form .form_row .form_label{font-size:14px;margin-top:0px}
/* 文字　「必須」　*/
.form .form_row .form_label span{font-size:12px;}
.form .form_content{margin-top:5px}
.footer_contact{margin-top:6px;}
.btn{width: 97%;padding:15px;font-size:15px;left: 50%;margin-top:-5px}
/* ボタン　「戻る」*/
.btn-back{font-size:14px;margin: 10px 0;}
/*ボタン　「HOMEに戻る」　　*/
.footer_contact a{width: 50px;
  border-radius: 5px;margin:30px auto 10px;padding: 5px 20px;
  font-size: 14px;}
}