@charset "UTF-8";
/* CSS Document */
/* ヘッダー＆フッターCSS */

/*ヘッダー*/
/*PC*/
@media only screen and (min-width: 769px) {
	/*ヘッダー*/
	header {
		position: fixed;
		z-index: 100;
		top: 0;
		left: 0;
		width: 100%;
		height: 140px;
		background: #fff;
	}
	
	.logo {
		position: absolute;
		top: 5px;
		left: 10px;
		width: 200px;
		height: auto;
		transition: 0.4s;
	}
	
	.logo:hover {
		opacity: 0.7;
	}
	
	/*上部*/
	.hd01 {
		z-index: 1;
		position: absolute;
		top: 20px;
		right: 50px;
		width: 580px;
		height: auto;
	}
	
	.hd01 a:nth-child(1) {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 42px;
		height: 42px;
		border-radius: 100px;
		box-shadow: 2px 3px 5px rgba(0,0,0,0.16);
		transition: 0.4s;
	}
	
	.hd01 a:nth-child(1) img {
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-right: -50%;
		transform: translate(-50%, -50%);
		width: 22px;
		height: auto;
	}
	
	.hd01 a:nth-child(1):hover {
		transform: translateY(-10px);
	}
	
	.hd01 a:nth-child(2) {
		display: block;
		position: absolute;
		top: 0;
		right: 320px;
		width: 200px;
		height: auto;
		padding: 10px 0 10px 30px;
		font-size: 18px;
		font-weight: bold;
		letter-spacing: 1px;
		line-height: 18px;
		text-align: center;
		box-sizing: border-box;
		border-radius: 40px;
		color: #fff;
		background: #8ED0D0;
		border: solid 2px #8ED0D0;
		transition: 0.4s;
	}
	
	.hd01 a:nth-child(2)::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 40px;
		transform: translate(0, -50%);
		width: 20px;
		height: 20px;
		background-image: url(/wp-content/uploads/2022/06/saiyou_white.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;
		transition: 0.4s;
	}
	
	.hd01 a:nth-child(2):hover {
		color: #8ED0D0;
		background: #fff;
		border: solid 2px #8ED0D0;
	}
	
	.hd01 a:nth-child(2):hover::before {
		background-image: url(/wp-content/uploads/2022/06/saiyou_blue.png);
	}
	
	.hd01 a:nth-child(3) {
		display: block;
		position: relative;
		width: 300px;
		height: auto;
		margin: 0 0 0 auto;
		padding: 10px 0 10px 30px;
		font-size: 18px;
		font-weight: bold;
		letter-spacing: 1px;
		line-height: 18px;
		text-align: center;
		box-sizing: border-box;
		border-radius: 40px;
		color: #fff;
		background: #8DC031;
		border: solid 2px #8DC031;
		transition: 0.4s;
	}
	
	.hd01 a:nth-child(3)::before {
		content: "";
		position: absolute;
		top: 52%;
		left: 28px;
		transform: translate(0, -50%);
		width: 17px;
		height: 17px;
		background-image: url(/wp-content/uploads/2022/06/otoiawase_white.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;
		transition: 0.4s;
	}
	
	.hd01 a:nth-child(3):hover {
		color: #8DC031;
		background: #fff;
		border: solid 2px #8DC031;
	}
	
	.hd01 a:nth-child(3):hover::before {
		background-image: url(/wp-content/uploads/2022/06/otoiawase_green.png);
	}
	
	/*下部*/
	#dd-full {
		z-index: 103;
		width: 1100px;
		height: auto;
		margin: 90px 30px 0 auto;
		transition: 0.4s;
	}
		
	#dd-full ul li {
		display: block;
		width: auto;
		height: 20px;
		list-style: none;
		color: #6E4D32;
		font-size: 20px;
		font-weight: bold;
		font-family: 'Kaisei Opti', serif;
		line-height: 20px;
		letter-spacing: 1px;
		text-align: center;
		float: left;
	}
		
	.dd-full-a {
		display: table-cell;
		vertical-align: middle;
		padding: 0 18px;
		letter-spacing: 1px;
		color: #6E4D32;
	}
		
	#dd-full li ul {
		width: 100vw;
		height: 350px;
		position: absolute;
		z-index: 100;
		top: 140px;
		left: 0;
		padding: 50px 0;
		background: rgba(247,250,239,0.95);
	}
	
	#dd-full .active {
		padding-bottom: 25px;
		border-bottom: solid 5px #8DC031;
		transition: 0.4s;
	}
		
	#dd-full-content {
		z-index: 1;
			position: absolute;
			top: 45%;
			left: 50%;
			margin-right: -50%;
			transform: translate(-50%, -50%);
			width: 900px;
			height: auto;
	}
		
	.dd-full00 {
		position: relative;
		width: 900px;
		height: auto;
		margin: 0 auto;
	}
	
	.dd-a-img {
		z-index: 1;
		width: 250px;
		height: 160px;
		padding: 0 0 0 0;
		border-radius: 0 30px 0 30px;
		overflow: hidden;
	}
	
	.dd-a-img::after {
		z-index: -1;
		position: relative;
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		top: 0;
		background-repeat: no-repeat;
		background-size: cover;
		-moz-transition: -moz-transform 0.4s linear;
		-webkit-transition: -webkit-transform 0.4s linear;
		-o-transition: -o-transform 0.4s linear;
		-ms-transition: -ms-transform 0.4s linear;
		transition: transform 0.4s linear;
	}
	
	.dd-a-img:hover::after {
		-webkit-transform: scale(1.3);
		-moz-transform: scale(1.3);
		-o-transform: scale(1.3);
		-ms-transform: scale(1.3);
		transform: scale(1.3);
	}
	
	.dd-a-img h3 {
		position: absolute;
		top: 170px;
		left: 10px;
		width: 100%;
		font-size: 18px;
		font-weight: bold;
		font-family: 'Kaisei Opti', serif;
		letter-spacing: 1px;
		line-height: 18px;
		color: #6E4D32;
		white-space: nowrap;
		text-align: left;
	}
	
	.dd-a-img h3 span {
		position: absolute;
		top: 50%;
		right: 0;
		transform: translate(0, -50%);
	}
	
	/*位置・背景設定*/
	.dd-a {
		display: block;
		position: relative;
		width: 250px;
		height: 160px;
		margin: 0 25px;
		float: left;
	}
	
	.dd-a-01 div.dd-a-img::after {
		background-image: url("/wp-content/uploads/2022/09/headerfooter_5_pc_2.jpg");
	}
	
	.dd-a-02 div.dd-a-img::after {
		background-image: url("/wp-content/uploads/2023/06/headerfooter_6_pc.jpg");
	}
	
	.dd-a-03 div.dd-a-img::after {
		background-image: url("/wp-content/uploads/2022/07/headerfooter_7_pc.jpg");
	}
	
}

/*SP*/
@media only screen and (max-width: 768px) {
	/*ヘッダー*/
	header {
		position: fixed;
		z-index: 101;
		width: 100%;
		height: 50px;
		background: #fff;
	}
	
	.logo {
		z-index: 102;
		position: absolute;
		top: 5px;
		left: 5px;
		transform: translate(0, 0);
		width: 110px;
		height: auto;
	}
	
	nav.globalMenuSp {
		position: fixed;
		z-index: 103;
		top: 50px;
		left: 0;
		transform: translateX(100%);
		transition: all 0.6s;
		width: 100%;
		height: 90%;
		padding: 10px 0 10% 0;
		overflow-y: scroll;
		background: #fff;
		background-size: 100% 100%;
	}
		
	/* このクラスを、jQueryで付与・削除する */
	nav.globalMenuSp.active {
		transform: translateX(0%);
	}
	
	.navToggle {
		display: block;
		position: absolute;
		right: 5px;
		top: 5px;
		width: 38px;
		height: 38px;
		cursor: pointer;
		z-index: 999;
		text-align: center;
		background: #8DC031;
		border-radius: 100px;
		border: solid 1px #8DC031;
	}
	
	.navToggle span {
		display: block;
		position: absolute;
		right: 0;
		left: 0;
		margin: auto;
		width: 22px;
		border-radius: 20px;
		border-bottom: solid 3px #fff;
		-webkit-transition: .35s ease-in-out;
		-moz-transition: .35s ease-in-out;
		transition: .35s ease-in-out;
	}
	
	.navToggle span:nth-child(1) {
		top: 10px;
	}
	
	.navToggle span:nth-child(2) {
		top: 18px;
	}

	.navToggle span:nth-child(3) {
		top: 26px;
	}
	
	/* 最初のspanをマイナス45度に */
	.navToggle.active span:nth-child(1) {
		width: 22px;
		position: absolute;
		top: 47%;
		border-radius: 20px;
		border-bottom: solid 3px #8DC031;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
 
	/* 2番目と3番目のspanを45度に */
	.navToggle.active span:nth-child(2),
	.navToggle.active span:nth-child(3) {
		width: 22px;
		position: absolute;
		top: 47%;
		border-radius: 20px;
		border-bottom: solid 3px #8DC031;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		transform: rotate(45deg);
	}
		
	.navToggle.active {
		width: 38px;
		height: 38px;
		background: #fff;
		border: solid 1px #8DC031;
	}
	
	.bd-tp {
		border-top: none!important;
	}
	
	.gb-a01 {
		display: block;
		position: relative;
		width: 320px;
		height: auto;
		margin: 0 auto;
		padding: 17px 0 17px 25px;
		font-size: 16px;
		font-weight: bold;
		font-family: 'Kaisei Opti', serif;
		letter-spacing: 1px;
		line-height: 16px;
		text-align: left;
		color: #8DC031;
		border-top: solid 1px #E3E3E3;
		box-sizing: border-box;
	}
	
	.gb-a01 font {
		position: relative;
		left: 15px;
		font-size: 12px;
		font-weight: normal;
		font-family: 'Shadows Into Light Two', cursive;
		letter-spacing: 2px;
		line-height: 12px;
		color: #6E4D32;
	}
	
	.gb-a02 {
		display: block;
		position: relative;
		width: 320px;
		height: auto;
		margin: 0 auto;
		padding: 0 0 17px 55px;
		font-size: 12px;
		font-weight: normal;
		letter-spacing: 1px;
		line-height: 12px;
		text-align: left;
		color: #535353;
		box-sizing: border-box;
	}
	
	.gb-a02 font {
		position: relative;
	}
	
	.gb-a02 font::before {
		content: ">";
		z-index: 0;
		position: absolute;
		top: 42%;
		left: -16px;
		transform: translate(0, -50%);
		font-size: 10px;
		line-height: 10px;
		text-align: center;
		color: #fff;
	}
	
	.gb-a02 font::after {
		content: "";
		z-index: -1;
		position: absolute;
		top: 50%;
		left: -20px;
		transform: translate(0, -50%);
		width: 14px;
		height: 14px;
		border-radius: 100px;
		background: #8ED0D0;
	}
	
	.gb-btn {
		position: relative;
		width: 100%;
		height: auto;
		padding: 25px 0;
		margin: 15px auto 0 auto;
		background: rgba(183,223,223,0.25);
	}
	
	.gb-btn font {
		display: block;
		position: relative;
		font-size: 12px;
		letter-spacing: 1px;
		line-height: 12px;
		text-align: center;
	}
	
	.gb-btn p {
		text-align: center;
	}
	
	.gb-tel {
		display: table;
		position: relative;
		margin: 10px auto 8px auto;
		padding: 0 0 0 20px;
		font-size: 28px;
		font-weight: bold;
		letter-spacing: 2px;
		line-height: 28px;
		text-align: center;
		color: #8DC031;
	}
	
	.gb-tel::before {
		content: "";
		position: absolute;
		top: 54%;
		left: -10px;
		transform: translate(0, -50%);
		width: 25px;
		height: 25px;
		background-image: url(/wp-content/uploads/2022/07/headerfooter_9_smp-1.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;
	}
	
	.gb-btn00 {
		position: relative;
		width: 320px;
		height: auto;
		margin: 15px auto 0 auto;
	}
	
	.gb-btn00 a:nth-child(1) {
		display: block;
		position: relative;
		width: 120px;
		height: auto;
		margin: 0 auto 0 0;
		padding: 10px 0 10px 15px;
		font-size: 12px;
		font-weight: bold;
		letter-spacing: 1px;
		line-height: 12px;
		text-align: center;
		box-sizing: border-box;
		border-radius: 30px;
		color: #fff;
		background: #8ED0D0;
	}
	
	.gb-btn00 a:nth-child(1)::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 25px;
		transform: translate(0, -50%);
		width: 12px;
		height: 12px;
		background-image: url(/wp-content/uploads/2022/06/saiyou_white.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;
	}
	
	.gb-btn00 a:nth-child(2) {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 190px;
		height: auto;
		padding: 10px 0 10px 15px;
		font-size: 12px;
		font-weight: bold;
		letter-spacing: 1px;
		line-height: 12px;
		text-align: center;
		box-sizing: border-box;
		border-radius: 30px;
		color: #fff;
		background: #8DC031;
	}
	
	.gb-btn00 a:nth-child(2)::before {
		content: "";
		position: absolute;
		top: 52%;
		left: 15px;
		transform: translate(0, -50%);
		width: 10px;
		height: 10px;
		background-image: url(/wp-content/uploads/2022/06/otoiawase_white.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;
	}
	
	.gb-btn-img {
		z-index: 1;
		position: absolute;
		top: -18px;
		right: 20px;
		width: 60px;
		height: auto;
	}
	
	.gb-sns {
		display: table;
		position: relative;
		margin: 25px auto;
		font-size: 12px;
		font-weight: normal;
		font-family: 'Shadows Into Light Two', cursive;
		letter-spacing: 2px;
		line-height: 12px;
		text-align: center;
		color: #6E4D32;
	}
	
	.gb-sns img {
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-right: -50%;
		transform: translate(-50%, -50%);
		width: 17px;
		height: auto;
	}
	
	.gb-sns font {
		display: block;
		position: absolute;
		top: -11px;
		left: -50px;
		width: 35px;
		height: 35px;
		border-radius: 100px;
		box-shadow: 2px 3px 5px rgba(0,0,0,0.16);
	}
	
}

/*フッター*/
/*PC*/
@media only screen and (min-width: 769px) {
	/*フッター*/
	footer {
		position: relative;
		width: 100%;
		height: auto;
		padding: 50px 0 0 0;
		background: #fff;
	}
	
	#ft01 {
		position: relative;
		width: 750px;
		height: auto;
		margin: 0 auto 50px auto;
	}
	
	#ft01 img {
		display: block;
		position: relative;
		width: 280px;
		height: auto;
		margin: 0 auto 0 40px;
	}
	
	#ft01 p {
		position: absolute;
		top: 0;
		right: -75px;
		width: 435px;
		/* right: 0;
		width: 390px; */
		line-height: 26px;
		text-align: left;
	}
	
	#ft01 p a {
		color: #535353;
	}
	
	#ft02 {
		position: relative;
		width: 750px;
		height: auto;
		margin: 0 auto 60px auto;
	}
	
	#ft02 a:nth-child(1) {
		display: block;
		position: relative;
		width: 350px;
		height: auto;
		padding: 20px 30px 20px 50px;
		font-size: 20px;
		font-weight: bold;
		letter-spacing: 1px;
		line-height: 20px;
		text-align: center;
		box-sizing: border-box;
		border-radius: 40px;
		color: #fff;
		background: #8ED0D0;
		border: solid 2px #8ED0D0;
		transition: 0.4s;
	}
	
	#ft02 a:nth-child(1)::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 95px;
		transform: translate(0, -50%);
		width: 25px;
		height: 25px;
		background-image: url(/wp-content/uploads/2022/06/saiyou_white.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;
		transition: 0.4s;
	}
	
	#ft02 a:nth-child(1):hover {
		color: #8ED0D0;
		background: #fff;
		border: solid 2px #8ED0D0;
	}
	
	#ft02 a:nth-child(1):hover::before {
		background-image: url(/wp-content/uploads/2022/06/saiyou_blue.png);
	}
	
	#ft02 a:nth-child(2) {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 350px;
		height: auto;
		padding: 20px 0 20px 50px;
		font-size: 20px;
		font-weight: bold;
		letter-spacing: 1px;
		line-height: 20px;
		text-align: center;
		box-sizing: border-box;
		border-radius: 40px;
		color: #fff;
		background: #8DC031;
		border: solid 2px #8DC031;
		transition: 0.4s;
	}
	
	#ft02 a:nth-child(2)::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 40px;
		transform: translate(0, -50%);
		width: 20px;
		height: 20px;
		background-image: url(/wp-content/uploads/2022/06/otoiawase_white.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;
		transition: 0.4s;
	}
	
	#ft02 a:nth-child(2):hover {
		color: #8DC031;
		background: #fff;
		border: solid 2px #8DC031;
	}
	
	#ft02 a:nth-child(2):hover::before {
		background-image: url(/wp-content/uploads/2022/06/otoiawase_green.png);
	}
	
	#ft03 {
		position: relative;
		width: 1000px;
		height: auto;
		margin: 0 auto 50px auto;
		padding: 50px 0 0 0;
		border-top: solid 1px rgba(83,83,83,0.50);
	}
	
	.ft03-1 {
		position: relative;
		width: 200px;
		height: auto;
		margin: 0 auto 0 20px;
	}
	
	.ft03-2 {
		position: absolute;
		top: 50px;
		left: 250px;
		width: 200px;
		height: auto;
	}
	
	.ft03-3 {
		position: absolute;
		top: 50px;
		left: 450px;
		width: 250px;
		height: auto;
	}
	
	.ft03-4 {
		position: absolute;
		top: 50px;
		left: 700px;
		width: 300px;
		height: auto;
	}
	
	.ft03-a01 {
		display: block;
		position: relative;
		margin-bottom: 20px;
		font-size: 16px;
		font-weight: bold;
		letter-spacing: 1px;
		line-height: 16px;
		text-align: left;
		color: #535353;
		transition: 0.4s;
	}
	
	.ft03-a02 {
		display: block;
		position: relative;
		margin-bottom: 17px;
		font-size: 16px;
		font-weight: normal;
		letter-spacing: 1px;
		line-height: 16px;
		text-align: left;
		color: #535353;
		transition: 0.4s;
	}
	
	.ft03-a01:hover {
		color: #8DC031;
	}
	
	.ft03-a02:hover {
		color: #8DC031;
	}
	
	.ft-sns {
		position: absolute;
		bottom: -70px;
		right: -10px;
		width: 120px;
		height: auto;
	}
	
	.ft-sns img {
		position: relative;
		width: 100%;
		height: auto;
		transition: 0.4s;
	}
	
	.ft-sns img:hover {
		opacity: 0.7;
	}
	
	.ft-credit {
		position: relative;
		font-size: 14px;
		font-weight: normal;
		letter-spacing: 1px;
		line-height: 14px;
		text-align: center;
		padding: 0 0 8px 0;
		color: #A8A8A8;
	}
 	
}

/*SP*/
@media only screen and (max-width: 768px) {
	/*フッター*/
	footer {
		position: relative;
		width: 100%;
		height: auto;
		padding: 30px 0 32px 0;
		background: #fff;
	}
	
	#ft01 {
		position: relative;
		width: 300px;
		height: auto;
		margin: 0 auto 20px auto;
	}
	
	#ft01 img {
		display: block;
		position: relative;
		width: 180px;
		height: auto;
		margin: 0 auto 15px 0;
	}
	
	#ft01 p {
		line-height: 20px;
		text-align: left;
	}
	
	#ft01 p a {
		color: #535353;
	}
	
	#ft02 {
		display: none;
	}
	
	#ft03 {
		position: relative;
		width: 340px;
		height: auto;
		margin: 0 auto;
	}
	
	.ft03-1 {
		display: none;
	}
	
	.ft03-2 {
		display: none;
	}
	
	.ft03-3 {
		display: none;
	}
	
	.ft03-4 {
		display: none;
	}
	
	.ft-sns {
		position: absolute;
		top: -120px;
		right: 0;
		width: 90px;
		height: auto;
	}
	
	.ft-credit {
		position: relative;
		font-size: 10px;
		font-weight: normal;
		letter-spacing: 0.5px;
		line-height: 10px;
		text-align: center;
		padding: 0 0 10px 0;
		color: #A8A8A8;
	}
	
	/*スマホ固定フッター*/
	#ft-fix {
		position: fixed;
		z-index: 100;
		bottom: -60px;
		width: 100%;
		height: 32px;
	}
	
	#ft-fix a font {
		position: relative;
	}
	
	#ft-fix a:nth-child(1) {
		display: block;
		position: relative;
		width: 29%;
		height: auto;
		padding: 10px 0 10px 15px;
		font-size: 12px;
		font-weight: bold;
		font-family: 'Kaisei Opti', serif;
		letter-spacing: 1px;
		line-height: 12px;
		text-align: center;
		color: #fff;
		background: #8ED0D0;
		border-radius: 10px 10px 0 0;
		box-sizing: border-box;
		float: left;
	}
	
	#ft-fix a:nth-child(1) font::before {
		content: "";
		position: absolute;
		top: 50%;
		left: -18px;
		transform: translate(0, -50%);
		width: 13px;
		height: 13px;
		background-image: url(/wp-content/uploads/2022/06/saiyou_white.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;
	}
	
	#ft-fix a:nth-child(2) {
		display: block;
		position: relative;
		width: 50%;
		height: auto;
		margin: 0 1%;
		padding: 10px 0 10px 15px;
		font-size: 12px;
		font-weight: bold;
		font-family: 'Kaisei Opti', serif;
		letter-spacing: 1px;
		line-height: 12px;
		text-align: center;
		color: #fff;
		background: #8DC031;
		border-radius: 10px 10px 0 0;
		box-sizing: border-box;
		float: left;
	}
	
	#ft-fix a:nth-child(2) font::before {
		content: "";
		position: absolute;
		top: 50%;
		left: -18px;
		transform: translate(0, -50%);
		width: 11px;
		height: 11px;
		background-image: url(/wp-content/uploads/2022/06/otoiawase_white.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;
	}
	
	#ft-fix a:nth-child(3) {
		display: block;
		position: relative;
		width: 19%;
		height: auto;
		padding: 10px 0 10px 15px;
		font-size: 12px;
		font-weight: bold;
		font-family: 'Kaisei Opti', serif;
		letter-spacing: 1px;
		line-height: 12px;
		text-align: center;
		color: #fff;
		background: #8ED0D0;
		border-radius: 10px 10px 0 0;
		box-sizing: border-box;
		float: left;
	}
	
	#ft-fix a:nth-child(3) font::before {
		content: "";
		position: absolute;
		top: 50%;
		left: -18px;
		transform: translate(0, -50%);
		width: 12px;
		height: 12px;
		background-image: url(/wp-content/uploads/2022/07/headerfooter_14_smp.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;
	}
	

}