@charset "utf-8";
/*@import url('https://fonts.googleapis.com/css2?family=Alata&display=swap');*/
/*
Theme Name: ohana-ph.jp
Theme URI: http://
Description:オハナファーマ
Version: 1
*/


/*全端末（PC・タブレット・スマホ）共通設定---*/

/*全体設定---*/
html { scroll-behavior: smooth;}
body {
	margin: 0px;
	padding: 0px;
	color: #000;	/*全体の文字色*/
	font-family: "IBM Plex Sans JP", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 18px;	/*文字サイズ*/
	line-height: 2;		/*行間*/
	background: #fff;	/*背景色*/
    text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;	/*safari*/
}
h1,h2,h3,h4,h5,p{
	font-weight: 400;
	font-style: normal;
}

img {border: none;width: 100%;height: auto;vertical-align: middle;}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
iframe {width: 100%;}
.centered{
	margin: 0 auto;
	position:relative;
} 
.sp {
		display: none;
	}
input,textarea,select {
    border: 1px solid #999;
    border-radius: 0.5em;
    padding: 0 0.5em;
}
select {
    border: 1px solid #999;
    border-radius: 0.5em;
    padding: 0.43em;	
}
@media screen and (max-width:1100px){
	body {
		font-size: 1.6vw;
	}
}
@media screen and (max-width:580px){
	body {
		font-size: 4vw;
	}
	.sp {
		display: inline;
	}
}
@media screen and (min-width:1101px){
	.centered{
		margin: 0 auto;
		max-width: 1100px;
	} 
}


/*リンク設定---*/
a {
	color: #000;		/*リンクテキストの色*/
	transition: 0.2s;	/*マウスオン時の移り変わるまでの時間設定。0.2秒。*/
	text-decoration: none;
}
a:hover {
	color: #75a932;			/*マウスオン時の文字色*/
	text-decoration: none;	/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
}


/*ヘッダー設定---*/
header {
	padding: 0.7em 2em 0.2em;
    background: #ffffffb5;
    position: fixed;
    width: 100%;
	z-index: 100;
}
@media screen and (max-width:580px){
	header {
		font-size: 0.9em;
		padding: 0.5em;
	}
		header .logo {
		font-size: 0.8em;
	}
}

header .logo {
    display: block;
    width: 20em;
    position: relative;
}
header .logo p {
    position: absolute;
    top: -0.7em;
    left: 7em;
    font-size: 0.9em;
}
a.logo:hover {
	color:#000;
}

/*PCメニュー設定---*/
@media screen and (min-width:981px){
	nav.drawer {
		top: 0;
        right: 4em;
        position: absolute;
        padding-top: 1.5em;
	}
	nav.drawer span{
		padding-left:0.1em;
	}
	nav.drawer span:nth-child(1),nav.drawer span:nth-child(2),nav.drawer span:nth-child(3){
		border-right:1px solid #999;
		padding-right: 0.5em;
	}
	nav.drawer a{
		display: inline-block;
	}
}

/*スマホメニュー設定---*/
#sp_menu_button{
	display: none;
}
@media screen and (max-width:980px){
	#sp_menu_button{
		display: block;
		top: 0;
		right: 0;
		position: fixed;
		transition: all 0.6s;
    	padding: 0.7em 0.7em 1.2em;
		z-index: 120;
	}
	
	.menu-trigger {
		display: inline-block;
	}
	.menu-trigger,
	.menu-trigger span {
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
		cursor: pointer;
	}
	.menu-trigger {
		position: relative;
		width: 2.4em;
		height: 2em;
		vertical-align: top;		
	}
	.menu-trigger span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 0.3em;
		background-color: #0058B0;
		border-radius: 0.3em;
	}
	.menu-trigger span:nth-of-type(1) {
		top: 0;
	}
	.menu-trigger span:nth-of-type(2) {
		top: 0.7em;
	}
	.menu-trigger span:nth-of-type(3) {
		bottom: 0.3em;
	}
	.menu-trigger span:nth-of-type(4)  {
		font-size: 0.8em;
		color: #0058B0;
		bottom: 0;
		background: none;
	}
	.drawer-open .menu-trigger span:nth-of-type(1) {
		transform: translateY(0.7em) rotate(-45deg);
	}
	.drawer-open .menu-trigger span:nth-of-type(2) {
		opacity: 0;
	}
	.drawer-open .menu-trigger span:nth-of-type(3) {
		transform: translateY(-0.7em) rotate(45deg);
	}

	.drawer {
		position: fixed;
		top: 0;
		right: -20em;
		height: 100vh;
		width: 20em;
		overflow: auto;
		z-index: 100;
		transition: all 0.6s;
		background-color: #6399f6f2;
		font-size:1.4em;
	}
	.drawer-open .drawer {
		right: 0;
	}
	nav.drawer a {
		display: block;
		padding: 1em 2em;
		border-bottom: 1px solid #ffffff63;
		color: #fff;
	}
	nav.drawer a:hover {
		background-color:#ffffff50 ;
	}
}

/*フッターリンク---*/
#footerlink {
    background: #eee;
    margin-top: 8em;
}
#footerlink ul {
    max-width: 60em;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    padding: 3em 0 2em;
}
#footerlink ul a {
	display: block;
	margin: 0 0.5em;
	text-align: center;
    font-size: 0.7em;
}
#footerlink ul a::before {
    content: "";
    display: block;
    background-size: cover;
    background-position: center;
	height: 12em;
}
#footerlink ul .gnav_ohana a::before  {
    background-image: url(img/photo13.jpg);
}
#footerlink ul .gnav_east a::before  {
    background-image: url(img/photo13_east.jpg);
}
#footerlink ul .gnav_west a::before  {
    background-image: url(img/photo13_west.jpg);
}
#footerlink ul .gnav_satsuki a::before  {
    background-image: url(img/photo13_satsuki.jpg);
}
#footerlink ul .gnav_yanogo a::before  {
    background-image: url(img/photo13_yanogo.jpg);
}
/*フッター設定---*/
footer {
	text-align: center;
	padding: 5em 1em 3em;
}
footer .copy{
	font-family: 'Alata', sans-serif;
	position: relative;
}

a.pagetop {
	font-family: 'Alata', sans-serif;
    display: block;
    position: fixed;
    bottom: 0.7em;
    right: 0.7em;
    width: 5em;
    height: 5em;
    background-color: #0058b0;
    color: #fff;
    text-align: center;
    line-height: 7.3em;
    border-radius: 50%;
    opacity: 0.7;
    z-index: 100;
    font-size: 0.8em;
}
a.pagetop:hover {
	color: #fff;
	opacity: 0.5;
}
a.pagetop::before{
	content: "";
    width: 1.3em;
    height: 1.3em;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    display: block;
    position: absolute;
    transform: rotate(45deg);
    top: 2em;
    left: 1.9em;
}
@media screen and (max-width:580px){
	#footerlink ul {
		grid-template-columns: 1fr 1fr;
	}
}


/*INDEX---*/
#index {
    max-width: 800px;
    padding: 10em 1em;
    margin: 0 auto;
}
#index h2 {
    font-size: 2em;
    border-bottom: 1px solid #aaa;
    padding: 0.5em 1em;
    margin-bottom: 1em;
}
#index p {
    margin-bottom: 1em;
}
#ohana-form dt{
	padding-top: 1.5em;
}

#ohana-form .required {
    display: inline-block;
    background: #eb635c;
    font-size: 0.7em;
    line-height: 1em;
    padding: 0.4em 0.5em 0.1em;
    color: #fff;
    border-radius: 0.3em;
    font-weight: bold;
    margin-left: 1em;
}
#ohana-form textarea{
    width: 100%;
	margin-bottom:-0.8em
}
.mwform-checkbox-field-text:after{
	content: "必須";
	display: inline-block;
    background: #eb635c;
    font-size: 0.7em;
    line-height: 1em;
    padding: 0.4em 0.5em 0.1em;
    color: #fff;
    border-radius: 0.3em;
    font-weight: bold;
    margin-left: 1em;
}
#ohana-form .check {
	margin-top:1em;
}
#ohana-form .privacy {
    width: 100%;
    border: 1px solid #ccc;
    padding: 1.5em;
    height: 10em;
    overflow: scroll;
    border-radius: 0.5em;
    font-size: 0.9em;
}
#ohana-form .privacy h4{
	padding-top:1em;
}
#ohana-form .button {
    margin-top: 2em;
	text-align: center;
}
#ohana-form input[type=submit] {
    padding: 1em 6em;
    border: none;
    background: #71b338;
    color: #fff;
    font-weight: bold;
	cursor: pointer;
}
#ohana-form input[type=submit].back {
    background: #eb635c;
}


/*HOME---*/
#home #main {
	position:relative;
	height:50em;
	background-color:#000;
	background-image: url(img/main_home.jpg);
	background-size: cover;
	background-position:center;
}
#east #home #main {
	background-image: url(img/photo13_east.jpg);
}
#west #home #main {
	background-image: url(img/photo13_west.jpg);
}
#satsuki #home #main {
	background-image: url(img/photo13_satsuki.jpg);
}
#yanogo #home #main {
	background-image: url(img/photo13_yanogo.jpg);
}

#home #main h1 {
	position:absolute;
	top: 12em;
    right: 2em;
}
#home #main h1 span {
    z-index: 2;
    font-size: 1.1em;
    color: #000;
    position: relative;
    display: block;
    line-height: 1.2em;
    padding: 2em 1em;
}
svg.h1_back {
    position: absolute;
    top: 0;
    z-index: 1;
	color:#ffffffdb;
}
/* Animation */
#home #main h1 {
  animation: floating-y 1.8s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y {
  0% {
 	transform: translateY(-5%);
  }
  100% {
    transform: translateY(5%);
  }
}
.waves {
	position: absolute;
	bottom:-1px;
    width: 100%;
    height: 8vh;
	z-index: 10;
}

/* Animation */

.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves {
    height:40px;
    min-height:40px;
  }
  .content {
    height:30vh;
  }
}

#home #news_area {
	padding: 8em 0 3em;
}
#home #news_area  h3 {
    text-align: center;
}
#home #news_area h3 span{
	position: absolute;
    left: 0;
    color: #eee;
    font-size: 7em;
    z-index: -1;
}
#home #news_area h3 hr {
    color: #eee;
	width: 35em;
    margin: 0 auto;
}
#home #news_list ul {
	width: 40em;
    margin: 2em auto 1em;
    max-height: 9em;
    overflow: scroll;
}
#home #news_list li {
	border-bottom: 1px dotted #eee;
    line-height: 1.2em;
    padding: 0.5em;
}
#home #news_text ul{
	max-width: 40em;
    margin: 0 auto 2em;
}
#home #news_text li{
	position:relative;
	margin-left: 2em;
}
#home #news_text li::before {
    content: "";
    position: absolute;
    width: 1.5em;
    height: 1.5em;
    display: block;
    top: 0.2em;
    left: -1.8em;
    background: url(img/bm.png) no-repeat;
    background-size: contain;
}
#home #area01 {
    height: 35em;
    background: linear-gradient(to right, #98FFF3, #FFC5EF);
    position: relative;
    overflow: hidden;
}
#home #area01 .top_parts .waves {
    top: 0;
    transform: scale(-1, -1);
}
#home #area01 .top_parts,#home #area01 .bottom_parts {
	z-index:5;
}
#home #area01 section{
	position:relative;
	padding: 8em 2em 0 54%;
	height: 35em;
}
#home #area01 section::before {
	content: "";
    position: absolute;
    width: 50%;
    height: 35em;
    display: block;
    top: 0;
    left: 0;
    background: url(img/photo01.jpg) no-repeat;
    background-size: cover;
    background-position: center;	
}
#home #area01 section::after {
	content: "";
    position: absolute;
    width: 16em;
    height: 10em;
    display: block;
    bottom: 0;
    right: 0;
    background: url(img/logomark.png) no-repeat;
    background-size: cover;
    background-position: center;
    z-index: 1;
    opacity: 50%;	
}
#home #area01 h2{
	font-size: 2.6em;
	padding-bottom:0.5em;
}
#home #area01 p {
    font-size: 1.2em;
    padding: 0px 2em 4em 0;
    max-width: 33em;
    line-height: 1.5em;
    z-index: 10;
    position: relative;
}
#area02 {
    font-size: 1vw;
}
#home #area02 #box01 {
	padding: 3em 6em;
    text-align: center;
}
#home #area02 .photo li{
	display:inline-block;
	margin:1em;
}
#home #area02 .photo:nth-child(2) li,#home #area02 .photo:nth-child(3) li{
	margin:0;
}
#home #area02 .photo li::before  {
	content: "";
	display:block;
	background-size: cover;
    background-position: center;	
}

#home #area02 .photo02::before  {
	width: 16em;
    height: 21em;
    background: url(img/photo11.jpg) no-repeat;
}
#home #area02 .photo03::before  {
	width: 31em;
    height: 22em;
    background: url(img/photo13.jpg) no-repeat;
}
#home #area02 .photo04::before  {	
	width: 20em;
    height: 28em;
    background: url(img/photo05.jpg?1) no-repeat;
}
#home #area02 .photo05::before  {
	width: 17em;
    height: 24em;
    background: url(img/photo04.jpg?1) no-repeat;
}
#home #area02 .photo06::before  {
	width: 29em;
    height: 24em;
    background: url(img/photo03.jpg) no-repeat;
}
#home #area02 .photo07::before  {
	width: 20em;
    height: 24em;
    background: url(img/photo02.jpg) no-repeat;
}
#east #home #area02 .photo02::before  {
	width: 20em;
    height: 25em;
    background-image: url(img/photo02_east.jpg);
}
#east #home #area02 .photo03::before  {
	width: 32em;
    height: 19.5em;
    background-image: url(img/photo04_east.jpg);
}

#east #home #area02 .photo04::before  {	
	width: 20em;
    height: 25em;
    background-image: url(img/photo05_east.jpg?1);
}
#east #home #area02 .photo05::before  {
	width: 24em;
    height: 20em;
    background-image: url(img/photo12_east.jpg?1);
}
#east #home #area02 .photo06::before  {
	width: 24em;
    height: 20em;
    background-image: url(img/photo03_east.jpg);
}
#east #home #area02 .photo07::before  {
	width: 24em;
    height: 20em;
    background-image: url(img/photo11_east.jpg) ;
}
#west #home #area02 .photo02::before  {
	width: 20em;
    height: 25em;
    background-image: url(img/photo04_west.jpg);
}
#west #home #area02 .photo03::before  {
	width: 32em;
    height: 19.5em;
    background-image: url(img/photo12_west.jpg);
}
#west #home #area02 .photo04::before  {	
	width: 20em;
    height: 25em;
    background-image: url(img/photo02_west.jpg?1);
}
#west #home #area02 .photo05::before  {
	width: 24em;
    height: 20em;
    background-image: url(img/photo03_west.jpg?1);
}
#west #home #area02 .photo06::before  {
	width: 24em;
    height: 20em;
    background-image: url(img/photo11_west.jpg);
}
#west #home #area02 .photo07::before  {
	    width: 24em;
    height: 20em;
    background-image: url(img/photo05_west.jpg);
}
#satsuki #home #area02 .photo02::before  {
	width: 20em;
    height: 24em;
    background-image: url(img/photo02_satsuki.jpg);
}
#satsuki #home #area02 .photo03::before  {
	width: 32em;
    height: 19.5em;
    background-image: url(img/photo12_satsuki.jpg);
}
#satsuki #home #area02 .photo04::before  {	
	width: 20em;
    height: 25em;
    background-image: url(img/photo05_satsuki.jpg?1);
}
#satsuki #home #area02 .photo05::before  {
	width: 24em;
    height: 20em;
    background-image: url(img/photo11_satsuki.jpg?1);
}
#satsuki #home #area02 .photo06::before  {
	width: 24em;
    height: 20em;
    background-image: url(img/photo04_satsuki.jpg);
}
#satsuki #home #area02 .photo07::before  {
	width: 24em;
    height: 20em;
    background-image: url(img/photo01_satsuki.jpg) ;
}
#yanogo #home #area02 .photo02::before  {
	width: 20em;
    height: 25em;
    background-image: url(img/photo11_yanogo.jpg);
}
#yanogo #home #area02 .photo03::before  {
	width: 32em;
    height: 19.5em;
    background-image: url(img/photo12_yanogo.jpg);
}
#yanogo #home #area02 .photo04::before  {	
	width: 20em;
    height: 25em;
    background-image: url(img/photo05_yanogo.jpg?1);
}
#yanogo #home #area02 .photo05::before  {
	width: 24em;
    height: 20em;
    background-image: url(img/photo02_yanogo.jpg?1);
}
#yanogo #home #area02 .photo06::before  {
	width: 24em;
    height: 20em;
    background-image: url(img/photo03_yanogo.jpg);
}
#yanogo #home #area02 .photo07::before  {
	width: 24em;
    height: 20em;
    background-image: url(img/photo04_yanogo.jpg) ;
}
#home #area02 .photo08::before  {
	width: 18em;
    height: 25em;
    background: url(img/kizai01.jpg) no-repeat;
}
#home #area02 .photo09::before  {
	width: 18em;
    height: 25em;
    background: url(img/kizai02.jpg) no-repeat;
}
#home #area02 .photo10::before  {
	width: 18em;
    height: 25em;
    background: url(img/kizai03.jpg) no-repeat;
}
#home #area02 .photo11::before  {
	width: 18em;
    height: 25em;
    background: url(img/mukin01.jpg) no-repeat;
}
#home #area02 .photo12::before  {
	width: 18em;
    height: 25em;
    background: url(img/mukin02.jpg) no-repeat;
}
#home #area02 .photo13::before  {
	width: 18em;
    height: 25em;
    background: url(img/mukin03.jpg) no-repeat;
}
#home #area02 h4 {
	font-size: 3.5em;
    line-height: 1em;
    margin-top: 0.5em;
}
#home #area02 p {
	font-size: 1.3em;
    line-height: 1.5em;
    padding-bottom: 1em;
}
#home #area02 #box02,
#home #area02 #box03,
#home #area02 #box04 {
    position: relative;
	width:100%;
	display: block;
}
#home #area02 #box02 ul,
#home #area02 #box03 ul {
    position: absolute;
    right: 3em;
    top: 2em;
}
#home #area02 #box02 h4 {
    padding: 3em 2em 0.1em;
}
#home #area02 #box02 p {
    padding: 0.5em 7.5em 10em 5.5em;
    width: 35em;
    border-top: 1px solid #6cbbd6;
}
#home #area02 #box03 h4 {
    padding: 2em 2em 0.1em;
}
#home #area02 #box03 p {
	padding: 0.5em 5.5em 10em 5.5em;
    width: 32em;
    border-top: 1px solid #bdd66c;
    position: relative;
}
#home #area02 #box03 a.link_button {
	background: linear-gradient(to right, #aec562, #a1b65e);
    padding: 0.5em 1em 0.4em;
    border-radius: 2em;
    line-height: 1em;
    display: block;
    width: 8em;
    position: absolute;
    right: 5em;
    color: #fff;
    font-size: 0.9em;
}
#home #area02 #box03 a.link_button:hover {
	color:#fff;
}
#home #area02 #box04::before  {
	content: "";
    display: block;
    width: 28em;
    height: 22em;
    background: url(img/maina.png) no-repeat;
    background-size: cover;
    background-position: center;
    position: absolute;
    right: 3em;
    z-index: 10;
}
#home #area02 #box04 h4 {
    padding: 2em 2em 0.1em;
}
#home #area02 #box04 p {
	padding: 0.5em 10.5em 5em 5.5em;
    width: 50em;
    border-top: 1px solid #d6bc6c;
	position:relative;
}
#home #area02 #box04 p span {
	font-size:0.8em;
}

#access {
    padding-top: 10em;
}
#access .centered {
	padding: 2em 3em 11em 40em;
    position: relative;
}
#access .centered:before {
	content: "";
    position: absolute;
    width: 33em;
    height: 23em;
    display: block;
    top: 0em;
    left: 4em;
    background: url(img/access.png) no-repeat;
    background-size: cover;
    background-position: center;
}
#access h2 {
    font-size: 2.2em;
    border-bottom: 1px solid #ccc;
    margin-bottom: 0.5em;
}
#access li {
    line-height: 1.4em;
    padding: 0.3em;
}
#access li b {
    font-size: 0.8em;
    font-weight: normal;
}
#access li span {
	font-size:1.3em;
}
#access li.car:after {
	content: "";
    position: relative;
    width: 1.7em;
    height: 1.22em;
    display: inline-block;
    background: url(img/car.png) no-repeat;
    background-size: cover;
    background-position: center;
    left: 0.5em;
    top: 0.2em;
}
#access li.walk:after {
	content: "";
    position: relative;
    width: 0.75em;
    height: 1.2em;
    display: inline-block;
    background: url(img/walk.png) no-repeat;
    background-size: cover;
    background-position: center;
    left: 0.5em;
    top: 0.1em;
}
#info {
	padding-top:8em;
	margin-bottom: 1em;
}

#info .wrapper {
    height: 45em;
    background: #DAEBFF;
    position: relative;
    overflow: hidden;
}
#east #info .wrapper,#east #info h4 span {
    background: #d9edcb;
}
#west #info .wrapper,#west #info h4 span {
    background: #ffeceb;
}
#satsuki #info .wrapper,#satsuki #info h4 span {
    background: #e9ebbc;
}
#yanogo #info .wrapper,#yanogo #info h4 span {
    background: #ffe8b5;
}
#east #info td,#east #info th {
	border: 2px solid #d9edcb;
}
#west #info td,#west #info th {
	border: 2px solid #ffeceb;
}
#satsuki #info td,#satsuki #info th {
	border: 2px solid #e9ebbc;
}
#yanogo #info td,#yanogo #info th {
	border: 2px solid #ffe8b5;
}

#info .top_parts,#info .bottom_parts {
	z-index:5;
}
#info .top_parts .waves {
    top: 0;
    transform: scale(-1, -1);
}
#info section{
	position:relative;
	padding: 6em 2em 0 54%;
	height: 45em;
}
#info section::before {
	content: "";
    position: absolute;
    width: 50%;
    height: 45em;
    display: block;
    top: 0;
    left: 0;
    background-image: url(img/photo13.jpg);
    background-size: cover;
    background-position: right;	
}
#east #info section::before {
	background-image: url(img/photo01_east.jpg);
}
#west #info section::before {
	background-image: url(img/photo12_west.jpg);
}
#satsuki #info section::before {
	background-image: url(img/photo12_satsuki.jpg);
}
#yanogo #info section::before {
	background-image: url(img/photo12_yanogo.jpg);
	background-position: center;	
}

#info section::after {
	content: "";
    position: absolute;
    width: 16em;
    height: 10em;
    display: block;
    bottom: 0;
    right: 0;
    background: url(img/logomark.png) no-repeat;
    background-size: cover;
    background-position: center;
    z-index: 1;
    opacity: 50%;	
}
#info h2{
	font-size: 2.6em;
	padding-bottom:0.5em;
	line-height: 0.8em;
}
#info h2 span{
	font-size:0.5em;
}
#info h4{
	padding-top: 1em;
    position: relative;
    text-align: center;
    width: 30em;
    height: 1.5em;
    margin-bottom: 1em;
    margin-top: 0.5em;
}
#info h4 span {
    background: #DAEBFF;
    display: inline-block;
    position: absolute;
    top: 0.1em;
    left: 2em;
    padding: 0 0.5em;
}
#info h4 hr{
	color: #aaa;
}
#info p {
	font-size: 1.2em;
	padding-left:1em;
    max-width: 30em;
    line-height: 1.5em;
    z-index: 10;
    position: relative;
}
#info #hours {
	max-width: 30em;
    background: #fff;
    border-radius: 1em;
    padding: 1em;
}
#info #hours tr {
    height: 3em;
}
#info table {
	width:100%;
}
#info th:nth-child(1),
#east #info th:nth-child(1),
#west #info th:nth-child(1),
#satsuki #info th:nth-child(1),
#yanogo #info th:nth-child(1) {
	width: 6em;
    border-left: none;
    padding: 0.5em 0 0.3em;
}
#info th:nth-child(1) span {
	font-size: 0.7em;
    display: block;
}
#info tr th:last-child,
#info tr td:last-child,
#east #info tr th:last-child,
#east #info tr td:last-child,
#west #info tr th:last-child,
#west #info tr td:last-child,
#satsuki #info tr th:last-child,
#satsuki #info tr td:last-child,
#yanogo #info tr th:last-child,
#yanogo #info tr td:last-child{
	border-right: none;	
}
#info tr:nth-child(1) th,
#east #info tr:nth-child(1) th,
#west #info tr:nth-child(1) th,
#satsuki #info tr:nth-child(1) th,
#yanogo #info tr:nth-child(1) th {
	border-top: none;
    font-size: 1em;
    padding: 1em 0;
}
#info tr:last-child th,
#info tr:last-child td,
#east #info tr:last-child th,
#east #info tr:last-child td,
#west #info tr:last-child th,
#west #info tr:last-child td,
#satsuki #info tr:last-child th,
#satsuki #info tr:last-child td,
#yanogo #info tr:last-child th,
#yanogo #info tr:last-child td {
	border-bottom: none;		
}
#info th {
	line-height: 1em;
    font-size: 1.2em;
    border: 2px solid #c1dbf9;
}
#info td {
    font-size: 1.5em;
    color: #aaa;
    border: 2px solid #c1dbf9;
    line-height: 1em;
    padding-top: 0.2em;
    text-align: center;
}

#news {
    max-width: 800px;
    padding: 10em 1em;
    margin: 0 auto;
}
#news h2 {
    font-size: 2em;
    border-bottom: 1px solid #aaa;
    padding: 0.5em 1em;
    margin-bottom: 1em;
}
#news h3 {
	font-size: 1.5em;
    border-left: 7px solid #eb635c;
    margin-bottom: 0.5em;
    padding-left: 0.5em;
}
#news p {
	padding-bottom: 1em;
}
#news li {
    list-style: auto;
    margin-left: 1em;
}
#news ol,#news ul {
	padding-bottom: 1em;
}
#news a {
    color: #589624;
    text-decoration: underline;
}

@media screen and (max-width:580px){
	#ohana-form input[type=text],
	#ohana-form input[type=email]{
		width:100%;
	}
	#home #main {
		height: 25em;
	}
	#home #main h1 {
		top: 18em;
        right: 0.5em;
        font-size: 0.9em;
	}
	#news_area .centered {
		padding: 2em;
	}
	#home #news_area h3 hr {
		width: 100%;
	}
	#home #news_list ul {
		width: 100%;
	}
	#home #area01 {
		height: auto;
		background: linear-gradient(to bottom, #98ffd6, #FFC5EF);
	}
	#home #area01 section::before {
		width: 100%;
		height: 28em;
	}
	#home #area01 section {
		padding: 30em 1.5em 0em;
		height: auto;
	}
	#home #area01 h2 {
		font-size: 2.5em;
		text-align: center;
	}
	#home #area01 p {
		padding: 0em 0em 6em;
		font-size: 1em;
	}
	#area02 {
		font-size: 2vw;
	}
	#home #area02 #box01 {
		padding: 13em 0 0;
	}
	#home #area02 .photo li {
		margin: 0.2em;
	}
	#home #area02 .photo02::before {
		width: 15em;
		height: 21em;
	}
	#home #area02 .photo03::before {
		width: 32em;
		height: 22em;
	}
	#home #area02 .photo04::before {
		width: 22em;
		height: 32em;
	}
	#home #area02 .photo05::before {
		width: 25em;
		height: 35em;
	}
	#home #area02 .photo06::before {
		width: 28em;
		height: 30em;
	}
	#home #area02 .photo07::before {
		width: 19em;
		height: 30em;
	}
	#east #home #area02 .photo02::before,
	#west #home #area02 .photo02::before,
	#satsuki #home #area02 .photo02::before,
	#yanogo #home #area02 .photo02::before {
		width: 19em;
		height: 25em;
	}
	#east #home #area02 .photo03::before,
	#west #home #area02 .photo03::before,
	#satsuki #home #area02 .photo03::before,
	#yanogo #home #area02 .photo03::before  {
		width: 29em;
		height: 22em;
	}
	#east #home #area02 .photo04::before,
	#west #home #area02 .photo04::before,
	#satsuki #home #area02 .photo04::before,
	#yanogo #home #area02 .photo04::before  {
		width: 19em;
		height: 25em;
	}
	#east #home #area02 .photo05::before,
	#west #home #area02 .photo05::before,
	#satsuki #home #area02 .photo05::before,
	#yanogo #home #area02 .photo05::before  {
		width: 29em;
		height: 25em;
	}
	#east #home #area02 .photo06::before,
	#west #home #area02 .photo06::before,
	#satsuki #home #area02 .photo06::before,
	#yanogo #home #area02 .photo06::before  {
		width: 24em;
		height: 22em;
	}
	#east #home #area02 .photo07::before,
	#west #home #area02 .photo07::before,
	#satsuki #home #area02 .photo07::before,
	#yanogo #home #area02 .photo07::before  {
		width: 24em;
		height: 22em;
	}
	#home #area02 #box02 ul,
	#home #area02 #box03 ul {
		position: relative;
		right: 0;
		text-align:center;
	}
	#home #area02 #box02 p,
	#home #area02 #box03 p,
	#home #area02 #box04 p{
		padding: 0.8em 0.8em 1.6em 1.6em;
		font-size: 2em;
		width: 95%;
	}
	#home #area02 #box03 a.link_button {
		right: 0em;
	}
	#home #area02 .photo08::before,
	#home #area02 .photo09::before,
	#home #area02 .photo10::before,
	#home #area02 .photo11::before,
	#home #area02 .photo12::before,
	#home #area02 .photo13::before{
		width: 16em;
    	height: 23em;
	}
	#home #area02 #box02 h4, #home #area02 #box03 h4 {
		padding: 4em 2em 0.1em;
	}
	#home #area02 #box04 h4 {
		padding: 4em 0.8em 0.1em;
	}
	#home #area02 #box04 p {
		padding: 1em 8em 3em 01em;
	}
	#home #area02 #box04::before {
		width: 17em;
        height: 14em;
        right:1em ;
        top: 23em;
		position:absolute;
	}

	#access .centered {
		padding: 16em 2em 5em;
		font-size: 1.2em;
	}
	#access .centered:before {
		width: 100%;
		height: 14em;
		left: 0;
	}
	#info .wrapper {
		height: auto;
	}
	#info section::before {
		width: 100%;
		height: 20em;
	}
	#info section {
		padding: 21em 1.5em 5em;
		height: auto;
	}
	#info h2 {
		font-size: 2em;
	}
	#info p {
		padding: 0em 0em 1em;
		font-size: 1em;
		text-align: center;
	}
	#info #hours {
		padding: 1em;
	}
	#info tr:nth-child(1) th {
		font-size: 1em;
		padding: 0.3em 0;
	}
	#info td {
		font-size: 1em;
	}
	#info th:nth-child(1) {
		padding: 0.5em 0 0.2em;
	}
	#info section::after {
		right: auto;
		left: 0;
		width: 10em;
		height: 7em;
		bottom: 1em;
	}
	#news h2 {
		padding: 0;
	}
}


/*footer---*/

.grecaptcha-badge {
    margin-bottom: 4.5em;
}

#contact {
	padding: 6em 1em;
	text-align: center;
}
#contact h3 {
	font-size: 1.6em;
    font-family: 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', '游明朝','Yu Mincho', '游明朝体', 'YuMincho','ＭＳ Ｐ明朝', 'MS PMincho', serif;
	position: relative;
    padding-bottom: 2em;
	margin-top: 0.5em;
}
#contact h3 span{
	display: block;
	font-size: 0.6em;
	font-weight: normal;
	font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	line-height: 1em;
}
#contact p {
	font-size: 1em;
}
#contact p span:nth-of-type(1){
	font-size: 2.5em;
	display: block;
}
#contact p span:nth-of-type(1)::before {
    content: "";
    background: url(img-dp/icon-tel.png) no-repeat;
    position: relative;
    width: 1em;
    background-size: contain;
    height: 1em;
    display: inline-block;
    top: 0.15em;
}
#contact p span:nth-of-type(2){
	font-size: 1.6em;
	display: block;
}
#contact p span:nth-of-type(2)::before {
    content: "";
    background: url(img-dp/icon-mail.png) no-repeat;
    position: relative;
    width: 1em;
    background-size: contain;
    height: 1em;
    display: inline-block;
    top: 0.2em;
}
#contact p span:nth-of-type(2)::after {
	content: "@azetto.co.jp";
	display: inline;
}
#contact a{
	display: inline-block;
    background: linear-gradient(to bottom right, #F6621F, #ffc647);
    color: #fff;
    padding: 1em 2em;
    margin-top: 1em;
	border-radius: 0.5em;
	position: relative;
	top: 0;
	left: 0;
}
#contact a:hover {
  box-shadow: 0 0 2px #F6621F, 
    0 0 4px #F6621F,
    0 0 10px #F6621F;
}
#contact a::before {
    content: "";
    background: url(img-dp/icon-form.png) no-repeat;
    position: relative;
    width: 1em;
    background-size: contain;
    height: 1em;
    display: inline-block;
    top: 0.2em;
}