@charset "UTF-8";
/*
Theme Name: theme-sunfresh2
Author: T.Hiwatashi
Description: Original theme.
Version: 1.0
*/

/* ------------------- 基本構造 ------------------- */

a {
  text-decoration: none;
  box-sizing: border-box;
}

ul,
li {
  list-style: none;
}

html{
  height:100%;
  width:100%;
  font-size:16px;
  scroll-behavior: smooth;
}

*{
  box-sizing:border-box;
  -webkit-box-sizing: border-box;
}

body{
	max-width:1010px;
  background-color: #f7f5e9;
	font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
	margin:0 auto; /*0 auto左右のマージンをautoに*/
	padding:0;
}

/* ヘッダー */
header{
  max-width: 1010px;
  height: 40px;
  position: fixed;
  margin:0 auto; /*0 auto左右のマージンをautoに*/
  top: 0;
  left: 0;
  right: 0;
  z-index: 999; /* 最前面にする */
  background-color: #605936;
}

.header_inner {
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: inherit;
  position: relative;
}
/* ヘッダーのロゴ部分 */
.logo a {
	font-size:18px;
	font-weight: bold;
	width: 200px;
  color:#fdd81e;
  }
@media screen and (min-width: 960px) {
  .logo a {
    font-size:20px;
    width:400px;
  } 
}


/* ヘッダーのナビ部分 */
.header_nav {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 60vh;
  transform: translateX(100%);
  background-color:#3A3A39;
  transition: ease .4s;
}
@media screen and (min-width: 960px) {
  .header_nav {
    position: static;
    transform: initial;
    background-color: inherit;
    height: inherit;
    display: flex;
    justify-content: end;
    width: 60%;
  }
}

@media screen and (min-width: 960px) {
  .nav_list {
    width: 100%;
    display: flex;
    align-items: center;
    height: initial;
    justify-content: space-between;
  }
}
.nav-list {
  position: absolute;
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0;
}
@media screen and (min-width: 960px) {
  .nav-list {
    position: inherit;
    top: 0;
    left: 0;
    transform: translate(0, 0);
  }
}
/* ナビのリンク */
.nav_list-item a {
  color: #605936;
  width: 100%;
  display: block;
  text-align: center;
  font-size: 16px;
  color:white;
  margin-bottom: 24px;
}

.nav_list-item:last-child a {
  margin-bottom: 0;
}

@media screen and (min-width: 960px) {
  .nav_list-item a {
    margin-bottom: 0;
    font-size: 16px;
  }
  .nav_list-item a:link,.nav_list-item a:visited {
    background-color:#3A3A39;
  }
  .nav_list-item a:hover {
    color:#fdd81e;
    font-weight: bold;
  }
}

.hamburger-menu {
  width: 48px;
  height:60px;
  background-color: transparent;
  border-color: transparent;
  z-index: 9999;
}

@media screen and (min-width: 960px) {
  .hamburger {
    display: none;
  }
}

/* ハンバーガーメニューの線 */
.hamburger span {
  width: 100%;
  height: 1.5px;
  background-color: white;
  position: relative;
  transition: ease .4s;
  display: block;
}

.hamburger span:nth-child(1) {
  top: 0;
}

.hamburger span:nth-child(2) {
  margin: 8px 0;
}

.hamburger span:nth-child(3) {
  top: 0;
}
/* ハンバーガーメニュークリック後のスタイル */
.header_nav.active {
  transform: translateX(0);
}
.hamburger.active span:nth-child(1) {
  top: 5px;
  transform: rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  top: -13px;
  transform: rotate(-45deg);
}


/* 本文内容 */
#headsection {
	top:40px;
	position:relative;
	flex-direction: column;    /*要素を縦に並べる*/
	display: flex;
	width:100%;
  margin-left:0px;
} 
/* 本文見出し */
.mystyle {
  //border-top: solid 1px gray;
  //border-bottom: solid 1px gray;
  padding: 0.5em;      /*文字周りの余白*/
  color: #010101;      /*文字色*/
  background: #fff;    /*背景色*/
  border-bottom: solid 3px #516ab6;  /*下線*/
}
.mystyle,.fa-menu-list{
  font-size:120%;
  //font-weight:bold;
  height:100%;
}
.mystyle2 {
  font-size:120%;
  color:green;
  height:100%;
}

/* 電話番号表示 */
.my-pcimg-size img {
  width:auto;
  min-width:350px;

}
/* QRコード表示削除 */
.my-pc-size {
  display: none;

}
.my-pcqr-size img {
  display: none;

}

@media screen and (min-width: 960px) {
   .my-pcimg-size img {
        width:auto;}
   .my-pc-size{
      display: block;}
   .my-pcqr-size img{
      display: block;}
   html {
      font-size:18px;}
}
/* 登録ボタン */
.button,.buttons {
  display       : inline-block;
  width:150px;
  border-radius : 5%;          /* 角丸       */
  font-size     : 14pt;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 12px 12px;   /* 余白       */
  background    : #000066;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  transition    : .3s;         /* なめらか変化 */
  box-shadow    : 6px 6px 3px #666666;  /* 影の設定 */
  border        : 2px solid #000066;    /* 枠の指定 */
}
.button,.buttons:hover {
	box-shadow    : none;   
  color         : #000066;   
  background    : #fdd81e;
}
/* 戻るボタン */
.backbutton {
  background    : #e4e7f7dc;     /* 背景色     */
  color         : #171b23;     /* 文字色     */
  font-size: 16px;
  font-weight:bold;
  padding: 10px 35px;
  font-weight: normal;
  margin-left: 10px;
}

/* フッター*/
footer {
  position:fixed;
  bottom: -100px;
	width:100%;
	border-top: solid 1px #dddddd;
}


/* ------------------- フッター ------------------- */

/* コピーライト */
.copyright p	{width: auto;
	text-align: center;
	margin-right: auto;
	color: #666666;
	font-size: 14px;}


/* ------------------- プラグイン ------------------- */

/* お問い合わせフォーム */
.wpcf7 input,
.wpcf7 textarea	{
	width:80%;
	font-size:16px;
	padding: 8px;
	border-width: 1px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;}

.wpcf7 input[type="submit"]
{ width: 150px;
  display       : inline-block;
  border-radius : 5%;          /* 角丸       */
  font-size     : 14pt;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 12px 12px;   /* 余白       */
  background    : #000066;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  transition    : .3s;         /* なめらか変化 */
  box-shadow    : 6px 6px 3px #666666;  /* 影の設定 */
  border        : 2px solid #000066;    /* 枠の指定 */
}
.wpcf7 input[type="submit"]:hover:hover {
	box-shadow    : none;   
  color         : #000066;   
  background  :#ffaa00;    
}