@charset "UTF-8";


/* ---------------------------------------------------------
         全体設定
   --------------------------------------------------------- */
* {
    margin: 0;
    text-decoration: none;
    list-style: none;
    font-weight: bold;
    font-size: 21px;
    font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", 
                 "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", 
                 "メイリオ", "Meiryo", verdana, sans-serif;
    color: #231815;
}

#wrapper {
    overflow: hidden;
}

p {
    letter-spacing: 3px;
}

a,
a img,
.button_form {
    /* ホバー時の変化速度 */
    transition: 0.5s;
}

a:hover {
    /* 緑 */
    color: #005e3c;
}

a img:hover {
    /* 透明度半分 */
    opacity: 0.5;
}

#pagetop a:hover {
    /* 灰色半調 */
    background: #e6e6e6;
}

.button_form:hover {
    /* 緑半調 */
    background: #629985;
}

input[type="text"],
input[type="tel"],
input[type="email"],
textarea {
    font-size: 17px;
    font-weight: normal;
    outline-color: #231815;
}

input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
textarea:focus {
    /* 鮮やか目の緑 */
    outline-color: #028555;
}

textarea{
    line-height: 1.2em;
}

/* プレースホルダー */
input[type="text"]::placeholder,
input[type="tel"]::placeholder,
input[type="email"]::placeholder,
textarea::placeholder {
    font-weight: bold;
    letter-spacing: 3px;
}

/* オートフィル(入力内容記憶)出力時のレイアウト */
input[type="text"]:-webkit-autofill,
input[type="tel"]:-webkit-autofill,
input[type="email"]:-webkit-autofill {
    box-shadow: 0 0 0 1000px#c1ecdc inset;
    border-radius: 0.1rem;
    border:solid 1px rgb(100, 100, 100);
}

iframe {
    border: none;
}

ul {
    padding: 0;
}

hr {
    margin: 35px 75px 35px 0;
}

/* スマホ時 */
@media screen and (max-width: 768px){
    hr {
            margin: 100px 0 100px 0;
        }
}

h2 {
    font-size: 32px;
    color: #005e3c;
    border-bottom: 1px solid #000;
    letter-spacing: 8px;
    margin: 0 75px 30px 0;
    padding: 0 0 10px 0;
}

h3,
h4,
footer address p,
#recruit .rep p  {
    font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN",
                 "Hiragino Mincho Pro", "ヒラギノ明朝 Pro", "ヒラギノ明朝 ProN W3",
                 "Times New Roman", "游明朝", "Yu Mincho", YuMincho, "游明朝体", "YuMincho", 
                  HGS明朝E, serif;
}

h3 {
    font-size: 43px;
}

h4,
#recruit .rep p  {
    font-size: 32px;
}

/* スマホ時 */
@media screen and (max-width: 768px){
    h2 {
        margin: 50px 0 50px 0;
    }
}

/* ボタン 設定 --------------------------------------------------- */
.button_form {
    background-color: #005e3c;
    color: white;
    font-weight: bold;
    border: none;
    letter-spacing: 8px;
    /* letter-spacing分だけ、右側のpaddingを減らす */
    padding: 0 42px 0 50px;
}

/* ---------------------------------------------------------
         共通設定
   --------------------------------------------------------- */
.hide {
    display: none;
}
.center {
    text-align: center;
}

.top_space {
    margin-top: 60px;
}

.right_space {
    margin-right: 60px;
}

.warning {
    font-size: 18px;
    color: #e60000;
}

.for_pc {
    display: inline-block;
}

.for_mobile {
    display: none;
}

/* スマホ時 */
@media screen and (max-width: 768px){
    .for_pc {
        display: none;
    }
    
    .for_mobile {
        display: inline-block;
    }
}

/* 横並びの設定 */
.row,
.row_block {
    float: left;
    max-width: 760px;
}

.clearfix img {
    width: 100%;
    max-width: 760px;
}

.clearfix::after {
   content: "";
   display: block;
   clear: both;
}

.span1 {
    width: 10%
}

.span2 {
    width: 20%
}

.span3 {
    width: 30%
}

.span4 {
    width: 40%
}

.span5 {
    width: 50%
}

.span6 {
    width: 60%
}

.span7 {
    width: 70%
}

.span8 {
    width: 80%
}

.span9 {
    width: 90%
}

.span10 {
    width: 100%
}

/* スマホ時 */
@media screen and (max-width: 768px){
    .row {
        width: 100%;
        float: none;
    }
    
    /* 全幅にする */
    .span1,.span2,.span3,.span4,.span5,
    .span6,.span7,.span8,.span9 {
        width: 100%;
    }
    
    .clearfix img {
        width: 100%;
    }
}

/* ---------------------------------------------------------
         サイドバー設定
   --------------------------------------------------------- */
aside {
    width: 20%;
    max-width: 400px;
    /* ここから下 左に固定する */
    position: fixed;
    left: 0;
}

#aside_home {
    margin: 80px 0 40px 20%;
}

#aside_home img {
    width: 113px;
}

.outside {
    margin: 0 0 0 20%;
}

.outside img {
    width: 30px;
    margin: 0 0 8px 0;
}

h1 {
    text-align: center;
}

#side_logo_index,
#side_logo {
    width: 60%;
}

#side_logo_index {
    margin: 900px 0 0 0;
}

#side_logo {
    margin: 100px 0 0 0;
}

/* スマホ時 */
@media screen and (max-width: 768px){
    aside {
        display: none !important;
    }
}

/* ---------------------------------------------------------
         サイドバー以外の範囲 設定
   --------------------------------------------------------- */
.contents {
    float: left;
    width: 80%;
    max-width: 1520px;
    /* サイドバーの幅だけ空ける */
    margin: 0 0 0 20%;
}

/* スマホ時 */
@media screen and (max-width: 768px){
    .contents {  
        width: 100%;
        /* サイドバー分開けていた空白を削除 */
        margin: 0 0 0 0;
    }
}

/* ---------------------------------------------------------
         ヘッダー内メニュー欄 設定
   --------------------------------------------------------- */
.menu {
    display: block;
}

#mobile_logo {
    display: none;
}

#header nav ul {
    justify-content: space-around;
    width: 400px;
    margin: 55px 0 20px auto;
}

#header nav li {
    flex: 1 0 auto;
    margin-bottom: 0;
}

#header nav li a {
    font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", 
                 "Hiragino Mincho Pro", "ヒラギノ明朝 Pro", "ヒラギノ明朝 ProN W3",
                 "HG正楷書体-PRO", "SimSun", "HG行書体", "HGP行書体",
                 "游明朝", "Yu Mincho", YuMincho, "游明朝体", "YuMincho", 
                 HGS明朝E, serif;
    font-size: 20px;
    margin: 0 15% 0 0;
    letter-spacing: 8px;
}

#header nav a:hover {
    color: #005e3c;
}

#header nav a {
    padding: 0 0 20px 0;
    display: block;
}

/* PC時 */
@media screen and (min-width: 768px){
    /* PC時はスマホ用MENUボタンを非表示 */
    #open,#close {
        display: none !important;
   }

    #navi_header {
        display: block !important;
    }
}

/* スマホ時 */
@media screen and (max-width: 768px){
    /* ロゴをヘッダーにセンタリング ここから */
    #mobile_logo {
        display: block;
        text-align: center;
    }
    
    #mobile_logo img {
        width: 120px;
        margin: 20px 0;
    }
    /* ロゴをヘッダーにセンタリング ここまで */

    #header nav ul {
        flex-direction: column;
        width: auto;
        margin: 0;
    }

    #header nav li {
        padding-top: 0;
        border-bottom: 1px solid #ccc;
        margin: 0 0 0 0;
    }
    
    #header nav a {
        padding: 10px 0;
    }
    
    #header nav li a {
        text-align: center;
        margin: 0 0 0 0;
    }
    
    /* ハンバーガーメニューボタン ここから */
    #open {
        display: block;
        width: 50px;
        height: 8px;
        color: #fff;
        background: #a0a0a0;
        position: absolute;
        top: 20px;
        left: 12px;
        margin: 15px 0 0 0; 
        z-index: 100;
    }
    
    #open:before,
    #open:after {
        content: "";
        position: absolute;
        background: #a0a0a0;
        top: -15px;
        width:  100%;
        height: 100%;
    }
    
    #open:before {
        top: -15px;
    }
    
    #open:after {
        top: 15px;
    }
    
    #close {
        display: block;
        width: 50px;
        position: absolute;
        top: 20px;
        left: 12px;
        margin: 15px 0 0 0; 
        z-index: 100;
    }
    
    #close:before,
    #close:after {
        display: block;
        content: "";
        width: 50px;
        height: 5px;
        background: #a0a0a0;
    }
    
    #close:before {
        transform: rotate(-45deg);
    }
    
    #close:after {
        transform: rotate(45deg);
        margin: -4px 0 0 0;
    }
    
    #navi_header {
        display: none;
    }
    /* ハンバーガーメニューボタン ここまで */
}

/* ---------------------------------------------------------
         スライドショー欄 設定
   --------------------------------------------------------- */
/* メイン画像エリアの設定 */
.main_imgBox {
    width: 100%;
    height: 840px;
    /* ここから下 はみ出した部分を隠す */
    overflow: hidden;
    position: relative;
}

/* スライドショー上のロゴの設定 */
#img_logo {
    margin: auto;
    z-index: 98;
    position: absolute;
    width: 360px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 画像が入っている枠の設定 */
#img_container {
    width: 100%;
    height: 840px;
    background-color: #fff;
    /* ここから下 はみ出した部分を隠す */
    overflow: hidden;
    position: relative;
    margin: 0 0 80px 0;
}

/* メイン画像自体の設定 */
.main_img {
    z-index: 10;
    opacity: 0;
    width: 100%;
    height: 840px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    -webkit-animation: anime 18s 0s infinite;
    animation: anime 18s 0s infinite;
}

/* スライドショー用画像の設定 */
#slide1 {
    background-image: url(../img/slide1.jpg);
}

#slide2 {
    background-image: url(../img/slide2.png);
}

#slide3 {
    background-image: url(../img/slide3.png);
}

/* スライドショー自体の設定 */
/*     開始時間をずらして画面に表示する     */
.main_img:nth-of-type(1) {
      -webkit-animation-delay: 0s;
      animation-delay: 0s;
}

.main_img:nth-of-type(2) {
      -webkit-animation-delay: 6s;
      animation-delay: 6s;
}

.main_img:nth-of-type(3) {
      -webkit-animation-delay: 11s;
      animation-delay: 12s;
}

/* スライドショー用アニメーションの設定 */
@keyframes anime {
0% {
      opacity: 0;
  }

  33% {
      opacity: 1;
  }

  49% {
      opacity: 0;
  }

  66% {
      opacity: 0;
      transform: scale(1.2) ;
      z-index:9;
  }

  100% {
    opacity: 0;
  }

}

@-webkit-keyframes anime {
0% {
      opacity: 0;
  }

  33% {
      opacity: 1;
  }

  49% {
      opacity: 0;
  }
  
  66% {
      opacity: 0;
      transform: scale(1.2) ;
      z-index:9;
  }

  100% {
    opacity: 0;
  }

}

/* ---------------------------------------------------------
         フッター欄 設定
   --------------------------------------------------------- */
footer {
    width: 100%;
    height: auto;
    /* ここから下 はみ出した部分を隠す */
    overflow: hidden;
    position: relative;
}

/* 背景画像自体の設定 */
#footerback_img {
    z-index: -10;
    opacity: 0.5;
    width: 100%;
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover !important;
    position: absolute;
    background: url(../img/footer.png);
}

#footer_content {
    margin: 0 0 120px 125px;
    padding: 130px 0 0 0;
}

#footer_logo_pc {
    width: 395px;
}

footer ul {
    margin: 10px 0 60px 0;
}

footer li a {
    letter-spacing: 3px;
    margin: 0 0 8px 0;
}

footer li:before {
    content:  ">";
    padding: 0 10px 0 0;
}

footer address p {
    font-style: normal;
    font-size: 23px;
    font-weight: 500;
    letter-spacing: 3px;
}

footer address .row_block:first-of-type {
    /* 1番目のrow_blockのみ、右に余白を入れる */
    margin: 0 20px 0 0;
}

/* スマホ時 */
@media screen and (max-width: 768px){
    footer,
    #footer_background {
        height: 100vh;
    }

    #footer_logo_mobile {
        width: 300px;
        margin: 0 0 0 20px;
    }
    
    #footer_content {
        margin: 0 0 120px 20px;
        padding: 0 0 0 0;
    }
    
    footer ul {
        margin: 10px 0 40px 0;
    }
}

/* スマホ時2 */
@media screen and (max-width: 484px){
    footer .row_block {
        width: 100%;
        float: none;
    }
    
    footer ul:first-of-type {
        /* 1番目のulのみ、下の余白を取る */
        margin: 10px 0 0 0;
    }
    
    footer ul:nth-of-type(2n) {
        /* 2番目のulのみ、上の余白を取る */
        margin: 0 0 40px 0;
    }
}

/* ---------------------------------------------------------
         ページトップへ戻るボタン 設定
   --------------------------------------------------------- */
#pagetop {
    position: fixed;
    bottom: 15px;
    right: 15px;
}

#pagetop a {
    display: block;
    background: #a0a0a0;
    color: #fff;
    width: 40px;
    height: 35px;
    padding: 10px 5px;
}

#pagetop a:before {
    content:  "";
    width: 20px;
    height: 20px;
    display:  block;
    border-top: solid 4px;
    border-right: solid 4px;
    transform: rotate(-45deg);
    position:  absolute;
    top: 10px;
    bottom:  0;
    left:  0;
    right:  0;
    margin:  auto;
}

/* ---------------------------------------------------------
         各コンテンツ欄 設定
   --------------------------------------------------------- */
section {
    margin: 0 0 160px 0;
}

/* スマホ時 */
@media screen and (max-width: 768px){
    section {
        margin: 0 20px 100px 20px;
    }
}

/* ---------------------------------------------------------
         浜田農産のご紹介欄 設定
   --------------------------------------------------------- */
#intro .clearfix img {
    margin: 0 0 20px 0;
    width: 100%;
}

#intro .clearfix {
    margin: 0 0 100px 0;
}

#intro h3 {
    margin: 50px 115px 20px 60px;
}

#intro p {
    margin: 0 115px 0 60px;
}

/* スマホ時 */
@media screen and (max-width: 768px){
    #intro .clearfix img {
        margin: 0 0 0 0;
    }

    #intro h3 {
        margin: 50px 0 45px 0;
    }
    
    #intro p {
        margin: 0 0 0 0;
    }
}

/* ---------------------------------------------------------
         facebook、Youtube埋め込み欄 設定
   --------------------------------------------------------- */
#sns .clearfix {
    margin: 60px 0 0 0;
    /* ここから下 中央寄せの設定 */
    position: relative;
    left: 10%;
}

#sns #area_facebook,
#sns #area_youtube {
       margin-bottom: 30px;
   }

#sns #area_facebook {
    width: 500px;
    margin-right: 60px;
}

#sns #area_youtube iframe {
    width: 560px;
    height: 315px;
}

/* 埋め込み外部サイト 横並び表示可能幅時 */
@media screen and (min-width: 1416px){
    #sns #area_facebook {
        margin-right: 60px;
    }
}

/* 埋め込み外部サイト 横並び表示不可能幅時 */
@media screen and (max-width: 1416px){
    #sns .row {
        width: 100%;
        max-width: none;
        float: none;
    }
    
    /* 全幅にする */
    #sns .span1, #sns .span2, #sns .span3, #sns .span4, #sns .span5,
    #sns .span6, #sns .span7, #sns .span8, #sns .span9 {
        width: 100%;
    }

    #sns .clearfix {
        left: 0;
    }
    
    #sns #area_facebook {
        width: 100%;
        margin-right: 0;
        margin-bottom: 0;
    }
    
    #sns #area_youtube {
       margin-top: 60px;
    }
}

/* スマホ時 */
@media screen and (max-width: 768px){    
    #sns #area_youtube iframe {
        width: 100%;
    }
}

/* ---------------------------------------------------------
         会社概要欄 設定
   --------------------------------------------------------- */
#company dt,
#company dd {
    letter-spacing: 3px;
}

#company dt {
    float: left;
}
#company dd {
    margin: 0 0 0 190px;
}

/* 項目名欄 均等揃え設定 */
#company .letter2 {
    letter-spacing: 75px;
    /* 右側の余白を文字間分だけ削除する */
    margin-right: -75px;
}

#company .letter3a {
    letter-spacing: 37px;
    /* 右側の余白を文字間分だけ削除する */
    margin-right: -37px;
}

#company .letter3 {
    letter-spacing: 28px;
    /* 右側の余白を文字間分だけ削除する */
    margin-right: -28px;
}

#company .letter4 {
    letter-spacing: 12px;
    /* 右側の余白を文字間分だけ削除する */
    margin-right: -12px;
}

#company .row:first-of-type {
    /* 1番目のrowのみ、右に余白を入れる */
    margin: 0 10px 0 0;
}

/* スマホ時 */
@media screen and (max-width: 768px){
    #company dt {
        float: none;
        color: #a0a0a0;
    }
    
    #company dd {
        margin: 0 0 20px 0;
    }
    
    /* 項目名欄 均等揃え設定 */
    #company .letter2 {
        letter-spacing: 45px;
        /* 右側の余白を文字間分だけ削除する */
        margin-right: -45px;
    }

    #company .letter3a {
        letter-spacing: 22px;
        /* 右側の余白を文字間分だけ削除する */
        margin-right: -22px;
    }

    #company .letter3 {
        letter-spacing: 12px;
        /* 右側の余白を文字間分だけ削除する */
        margin-right: -12px;
    }

    #company .letter4 {
        letter-spacing: 1px;
        /* 右側の余白を文字間分だけ削除する */
        margin-right: -1px;
    }
    
    #company .row {
        display: block;
    }
    
    #company .row:first-of-type {
        /* 1番目のrowにのみ入れた、右の余白を取る */
        margin: 0 0 0 0;
    }
}

/* スマホ時2 */
@media screen and (max-width: 360px){
    #company .row_block {
        display: block;
    }
}

/* ---------------------------------------------------------
         アクセス欄 設定
   --------------------------------------------------------- */
#area_googlemap iframe {
    width: 800px;
    height: 600px;
}

/* スマホ時 */
@media screen and (max-width: 768px){
    #area_googlemap iframe {
        width: 100%;
    }
}

/* ---------------------------------------------------------
         商品ラインナップ欄 設定
   --------------------------------------------------------- */
#product h3 {
    margin: 18px 0 30px 0;
}

#product h4 {
    margin: 45px 0 30px 0;
}

#product .clearfix {
    margin: 0 0 65px 0;
}

#product .division {
    margin: 0 0 90px 0;
    /* 以下は水平方向の中心寄せの設定 */
    display: flex;
    align-items: center;
}

#product .division:first-of-type {
    /* 1番目のdivisionにのみ、上に余白を入れる */
    margin-top: 40px;
}

#product .subdivision {
    margin: 40px 0 0 70px;
}

/* スマホ時 */
@media screen and (max-width: 768px){
    #product .division {
        /* 以下は水平方向の中央寄せを解除する設定 */
        display: block;
        align-items: normal;
    }

    #product .subdivision {
        margin: 40px 0 0 0;
    }
    
    #product .subdivision p {
        margin: 20px 0 0 0;
    }
}

#product dt,
#product dd {
    line-height: 28px;
}

/* 項目欄 共通 */
#product dt {
    float: left;
    color: #fff;
    background-color: #231815;
    font-size: 20px;
    letter-spacing: 3px;
    margin: 0 10px 15px 0;
    /* letter-spacing分だけ、右側のpaddingを減らす */
    padding: 0 7px 0 10px;
}

#product .dt_name:after {
    content: "商品名";
}

#product .dt_amount:after {
    content: "内容量";
}

#product .dt_price:after {
    content: "価　格";
}


/* 情報欄 共通 */
#product dd {
    margin: 0 0 15px 50px;
}


/* 商品名情報欄 */
#product .dd_name {
    font-size: 26px;
}

/* 内容量情報欄 */
#product .dd_amount {
    font-size: 20px;
}

/* 価格情報欄 */
#product .dd_price,
#product .dd_price0 {
    width: 300px;
    text-align: right;
}

#product .dd_price {
    font-size: 27px;
}

#product .dd_price:after {
    content: "円(税込)～";
    font-size: 23px;
}

#product .dd_price0:after {
    content: "お問い合わせ下さい";
}

/* スマホ時 */
@media screen and (max-width: 768px){
    #product .dd_price,
    #product .dd_price0 {
        width: 85%;
    }
}

/* ---------------------------------------------------------
         お問い合わせ 入力画面 設定
   --------------------------------------------------------- */
#form form {
    margin: 110px 0 0 0;
}

#form p {
    font-weight: normal;
}

/* スマホ時 */
@media screen and (max-width: 768px){
    #form {
        margin-bottom: 120px;
    }
}

/* お問い合わせ情報入力欄 設定
   --------------------------------------------------- */

#form .button_form {
    margin: 20px 0 0 0;
}

#form .division {
    width: 80%;
    max-width: 1124px;
    margin: 0 auto;
}

#form input[type="text"],
#form input[type="tel"],
#form input[type="email"],
#form textarea,
#form .warning {
    margin: 0 auto;
}

#form input[type="text"],
#form input[type="tel"],
#form input[type="email"],
#form textarea {
    display: block;
    width: 100%;
    /* 左右のpadding分だけ親要素から飛び出るため、
       padding左右分だけmargin左右をとる */
    margin: 25px -27px 0 -27px;
    padding: 23px 27px 18px 27px;
}

#form textarea{
    height: 374px;
    margin-top: 50px;
    line-height: 1.2em;
}

/* エラーメッセージ
   --------------------------------------------------- */

#form .warning {
    font-weight: bold;
    /* フォームの開始位置と合わせるために、
       フォームのpadding左右分だけmargin左右をとる */
    margin: 15px -27px -20px -27px;
}

#form #message_area .warning {
    margin-bottom: -42px;
}

/* ---------------------------------------------------------
         お問い合わせ 送信内容確認画面 設定
   --------------------------------------------------------- */
#form .clearfix {
    margin: 0 0 30px 0;
}

#form label {
    text-align: right;
    margin: 0 20px 0 0;
    letter-spacing: 3px;
}

#form label:after {
    content: ": ";
}

#form .show_message {
    word-wrap: break-word;
}

/* スマホ時 */
@media screen and (max-width: 768px){
    #form label {
        float: left;
        text-align: left;
        margin: 0 0 0 0;
    }

    #form p {
        display: block;
    }
}

/* ---------------------------------------------------------
         お問い合わせ 送信処理後画面/エラー画面 設定
   --------------------------------------------------------- */
#form #sent p {
    text-align: center;
    font-weight: bold;
    margin: 0 0 30px 0;
}

#form #sent p:first-of-type {
    /* 1番目のpにのみ、上に余白を入れる */
    margin-top: 110px;
}

/* ---------------------------------------------------------
         採用情報欄 設定
   --------------------------------------------------------- */
#recruit #heading h3 {
    margin: 90px 0 40px 0;
}

#recruit #heading p,
#recruit .division p {
    margin: 0 0 30px 0;
}

#recruit #heading img {
    width: 100%;
    margin: 35px 75px 25px 0;
}

#recruit .row {
    max-width: 100%;
}

#recruit .title1:before,
#recruit .title2:before {
    content:  "●";
}

#recruit .title1 {
    margin: 40px 0 0 0;
}

#recruit .division h3 {
    margin: 20px 0 30px 0;
}

#recruit .subdivision {
    padding: 30px 0 0 0;
}

#recruit .subdivision p {
    font-weight: normal;
}

#recruit .rep {
    margin: 80px 0 290px 0;
}

/* スマホ時 */
@media screen and (max-width: 768px){
    #recruit #heading p,
    #recruit .division p {
        margin: 0 0 50px 0;
    }

    #recruit #heading img {
        margin: 35px 0 25px 0;
    }

    #recruit .rep {
        margin: 100px 0 200px 0;
    }
}