@charset "UTF-8";

/*===================================================================================================
     header
========================================================================================================*/
 /* 検索ボタン「キーワードを入力」　*/
.header .header_search{
  width:calc(40% - 50px);-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3;
  display:-webkit-box;display:-ms-flexbox;display:flex;-js-display:flex;
  -webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  position:relative;*zoom:1;margin-right: 20px;}
.header .header_search:after,.header .header_search:before{
  content:" ";display:block;line-height:0}
.header .header_search:after{
  content:" ";display:block;clear:both}
 /* ↓「検索ボックス」　boxのケイの色・地色・文字の色　など　*/
.header .header_search input{
  width:270px;padding:5px;border-radius:5px 5px 5px 5px!important;
  font-size:12px;border:2px solid tan;background: white;color:darkgreen;}

/* ↓「検索ボックス」虫メガネの色　*/
.header .header_search i,.header .header_search svg{
   position:absolute;right:10px;top:24px;color:darkgreen;}/* 元の色　color:#70462E*/

.header .header_search input::-webkit-input-placeholder{color:rgba(112,70,46,0.3)}
.header .header_search input::-moz-placeholder{color:rgba(112,70,46,0.3)}
.header .header_search input:-ms-input-placeholder{color:rgba(112,70,46,0.3)}
.header .header_search input::-ms-input-placeholder{color:rgba(112,70,46,0.3)}
.header .header_search input::placeholder{color:darkgreen;}/* 元の色　color:rgba(112,70,46,0.3)*/

.wrap_header{position: fixed;width: 100%;z-index: 1;top:0px;}

/*===================================================================================================
     メインタイトル
========================================================================================================*/
/* 「お知らせ」のオビ　
.pageTitle{display: flex;justify-content: space-between;z-index:1;
  width: 100%;
  height: 50px;
  font-size:12px;
  color:#fff;background:darkgreen;}*/
/* 文字　「HOMEに戻る」「直前に戻る」　
.mycontent_header:before{content:"»";color:yellow;font-size: 15px;margin-left: 10px;}
.modoru_mobile{display: none;}
.modoru_pc{font-family:'Oswald', sans-serif;margin: 13px 0px 0 20px;}
.modoru a:hover{color:white;}
.pageTitle a{text-decoration: none;color:white;font-size: 14px;padding-left:2px;}*/

/* 9/22 変更　*/
.pageTitle{display: flex;justify-content: space-between;z-index:1;
  width: 100%;height: 60px;background:darkgreen;}
.modoru_pc{display: flex;}

/*  HOMEに戻る  直前に戻る　 の枠*/
.homenimodoru,.tyokuzennimodoru{
  border-radius: 4px;
  width: 150px;height: 30px;border: 1px solid yellow;text-align: center;
  margin: 15px 0 15px 20px;}
/*  HOMEに戻る  直前に戻る　 の文字指定*/
.pageTitle a{text-decoration: none;color:white;font-size: 16px;padding:2px;}

.mycontent_header:before{content:"»";color:yellow;font-size: 15px;}
.modoru_mobile{display: none;}
.modoru_pc{font-family:'Oswald', sans-serif;margin: 0px 0px 0 0px;}
.pageTitle a:hover{color:yellow;}

/* ぱんくず　*/
.pankuzu{background: #EEEEEE;height:36px;padding-left: 16px;}
.breadcrumb{padding:8px 0 7px;}
.breadcrumb_inner{width:100%;padding-right:15px;padding-left:15px;
  margin-right:auto;margin-left:auto;line-height:1;}
.breadcrumb span{font-size:12px;padding-bottom: 2px;}
.breadcrumb a{text-decoration:none;font-size:12px;color:#666;}
.breadcrumb i{margin:0 5px;color:#eb6100;}
.breadcrumb svg{font-size:12px;margin:0 5px;}


/*===================================================================================================
     検索ページ　　  search.php 用
========================================================================================================*/
/* search.php 用　「サイト内検索　SEARCH 直前に戻る」のオビ　*/
.pageTitle_search{display: flex;justify-content: space-around;z-index:1;
background:darkgreen;color:#fff;align-items: center;margin: auto;
width: 1000px;height: 50px;
font-size:12px;}
.pageTitle_search a{
text-decoration: none;color:yellow;border: 1px solid yellow;
font-size:14px;padding: 3px 10px;}
.pageTitle_search a:hover{background:#eb6100;color:white;}
/* 検索結果　*/
.text-center{
  font-size: 16px;text-align: center;margin-top: 10px;
  border-radius: 20px;width: 70%;
  padding: 18px 0 1px;color:red;background:#CCFFCC;}

/*「　xxxxx 」の検索結果　*/
.main_title_search{font-size: 16px;text-align: center;padding: 20px 0;}

/*===================================================================================================
     404 ERRORページ　　  404.php 用
========================================================================================================*/
/* 404.php 用　「404 NOT FOUND」のオビ　*/
.pageTitle_error{display: flex;justify-content: space-around;z-index:1;
background:yellow;color:darkred;align-items: center;margin-bottom: 20px;
width: 100%;height: 50px;
font-size:16px;}

/* =========================================================================
                          SNS
   ========================================================================= */
.sns_wrap{display: flex;justify-content: center;
  width: 100%;height:100px;margin-top: 10px;}
.sns-follow {margin: 40px 0;text-align: center;}
.sns-list {
    display: flex;justify-content: center;gap: 16px;list-style: none;
    padding: 0;margin: 0;}
.sns-list a {
    display: flex;align-items: center;justify-content: center;
    border-radius: 50%;transition: all 0.25s ease;
    background-color: #222;color: #fff;
    width: 48px;height: 48px;}
.sns-list a:hover {background-color: #000;transform: translateY(-3px);}
/* 各SNSのホバー色を変えたい場合 */
.sns-list li:nth-child(1) a:hover {background-color: #000;color:white;}      /* X */
.sns-list li:nth-child(2) a:hover {background-color: #E1306C;color:white;}  /* Instagram */
.sns-list li:nth-child(3) a:hover {background-color: #FF0000;color:white;}  /* YouTube */
.sns-list svg {width: 22px;height: 22px;}

/*===================================================================================================
        footer   元の色　.pagetop:#5A5A5A　.footer:#292929　
========================================================================================================*/
.footer{text-align:center;padding:0px 0 40px;background:darkgreen;}

.pagetop{background:#FFCC99;color:#eb6100;
  text-align:center;cursor:pointer;display:block;
  padding:15px 0;font-weight:bold;
  font-size:12px;line-height:1;margin-top: 0px;}
.pagetop:hover{background:#eb6100;color:#fff;}
.pagetop i,.pagetop svg{margin:5px 5px 0 0;font-size:15px;}

/*========= 波紋　=======================================================================*/
.hamon img{border-radius: 50%;width:70px;height: 70px;margin-top: 20px;}/*.hamonと同じ大きさにする*/
/*.imgにぼかし影を付ける　左位置/上位置/左右の大きさ/上下の大きさ/ rgba(色/色/色/透過)*/
.hamon img{box-shadow:0px 0px 30px 30px rgba(256,256,256,0%);}/*色と透過は はhtml内で上書き*/
/*========= 波紋を付ける　=====================================*/
.hamon{top:15px;/*配置する位置*/
       position: relative;/*波紋の基点とするためrelativeを指定*/
       display:inline-block;
       width:70px;height:70px;/*画像と同じ大きさにする*/
       border-radius: 50%;
       outline: none;transition: all .3s;}
/*波形を2つ設定*/
.hamon::after,.hamon::before {
       content: '';
       position: absolute;left: -24%;top: 4%;
       /*波形の形状*/
       border: 1px solid tan;/*線の色*/
       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){
.pageTitle_search{width: 920px;height: 50px;}
}
@media only screen and (max-width:960px){
.pageTitle_search{width: 680px;height: 50px;}
}
@media only screen and (max-width:767px){
.pageTitle_search{width: 500px;height: 50px;}

/*  HOMEに戻る  直前に戻る　 の文字指定*/
.modoru_pc{display: none;}
.modoru_mobile{display: flex;line-height: 16px;}
/*  HOMEに戻る  直前に戻る　 の枠*/
.homenimodoru,.tyokuzennimodoru{
  width: 70px;height: 42px;padding:4px 0 0px 0;
  margin: 9px 0 10px 9px;}
/*  HOMEに戻る  直前に戻る　 の文字指定*/
.pageTitle a{font-size: 13px;padding:0px 0 0px 0;}
.wrap_header{position: fixed;width: 100%;top:0px;z-index: 1;}
.pagetop{font-size:12px;}
.pagetop i,.pagetop svg{font-size:15px;}
.footer{padding:0px 0 25px;}
.hamon img{width:40px;height: 40px;margin-top: 12px;}/*.hamonと同じ大きさにする*/
.hamon{top:10px;width:40px;height:40px;}/*画像と同じ大きさにする*/
}
@media only screen and (max-width:540px){
.header .header_search input{width:220px;padding:5px;font-size:12px;}
.header .header_search{width:220px;margin-right: 10px;}
.pageTitle_search{width: 92%;height: 50px;}
.modoru_pc{margin: 13px 0px 0 0px;}/* 文字　「HOMEに戻る」「直前に戻る」　*/
.pankuzu{background: #EEEEEE;padding-left: 7px;}/* ぱんくず　*/
.hamon img{width:40px;height: 40px;margin-top: 12px;}/*.hamonと同じ大きさにする*/
.hamon{top:10px;width:40px;height:40px;}/*画像と同じ大きさにする*/
}
@media only screen and (max-width:420px){
.pageTitle{width: 100%;height: 70px;font-size:12px;}/* 「お知らせ」のオビ　*/
/* 右矢印　*/
.mycontent_header:before{margin-left: 10px;}
/*  HOMEに戻る  直前に戻る　 の枠*/
.homenimodoru,.tyokuzennimodoru{
  width: 56px;height: 46px;padding:7px 0 0px 0;
  margin: 12px 0 12px 10px;}
/*  HOMEに戻る  直前に戻る　 の文字指定*/
.pageTitle a{font-size: 13px;padding:0px 0 0px 0;}
.pageTitle_search{width:89%;height: 50px;}
/* ぱんくず　*/
.pankuzu{padding-left: 0px;}
.breadcrumb span{font-size:12px;padding-bottom: 3px;}
/* 検索ボタン「キーワードを入力」　*/
.header .header_search{width:180px;margin-right: 10px;}
.text-center{padding: 18px 0 3px;}
/* ↓「検索ボックス」虫メガネの色　*/
.header .header_search i,.header .header_search svg{top:31px;}
.sns_wrap{margin-top:0px;}
}
@media only screen and (max-width:360px){
.header .header_search input{
  width:150px;padding:5px;border-radius:5px 5px 5px 5px!important;
  font-size:12px;border:2px solid tan;}


/*===================================================================================================
        レスポンスの確認のために　色を変えている
          1140px red #990000   960px blue #330066   767px pink #C71585    540px 緑　#006400
  =====================================================================================================*/