/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
	display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

/*===================================
	<img>可変
====================================*/
img,
picture {
	max-width:100%;
	height:auto;
	/* 画像下のマージンを消す */
	vertical-align: bottom;
}
/*picture source,
picture img {
	width: 100%;
}*/

/*===========================================================
	GoogleFonts
============================================================*/
.wf-roundedmplus1c { font-family: "M PLUS Rounded 1c"; }


/*==========================================================*/
/*  /html5doctor.com Reset Stylesheet                       */
/*==========================================================*/






/*=================================================================
	PC size standerd
==================================================================*/

body {
  font-family: 'Avenir Next', 'Helvetica Neue', sans-serif;
  text-align: center;
  margin: 0;
}
article {
	/*  text-align: center; */
    width: 100%;
    /**/overflow: hidden;
}


/* 表示非表示切り替え／
---------------------------------
*PC表示*
.sp{
	display: none !important;
}
.pc{
	display: block !important;
}
*スマホ表示*
@media all and (max-width: 768px) {
	.sp{
		display: block !important;
	}
	.pc{
		display: none !important;
	}
}*/


/*=========================================================== 
   Drower
===========================================================*/
/*------------------------------------
	header
-------------------------------------*/
body article header {
	width: 100%;
	/*background: rgba(255,255,255,0.1);*/
	background-color: #6AB9B2;
	border-top: 2px solid #FFF;
	botder-bottom: 1px solid #FFF;
	
	padding: 0;
	position: relative;
	/*z-index: 5;*/
}

/*----------------------------------
	logo / 営業時間・Tel
----------------------------------*/
header > div:first-child {
	width: 100%;
	max-width: 1020px;
	/*background-color: #096;*/
	margin: 0 auto;
	padding: 3px;
	
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	
	position: relative;
	/*border: thin dashed #F6F;*/
}

/*------------------------
	Logo
-------------------------*/
header > div:first-child h1 {
	width: 32%;
	min-width: 20rem;
	display: block;
	/*background: #063;*/
}
header > div:first-child h1 a {
	text-decoration: none;
	/*background: #FF9;*/
	display: block;
	margin: 0 auto;
}
/** 画像 **/
header > div:first-child h1 a picture {
	width: 70%;
	margin: 0 auto;
	display: block;
	overflow: visible;
	
	/*border: thin dashed #0CF;*/
}
/** Text **/
header > div:first-child h1 span {
	width: 100% !important;
	/*width: 26rem;
	max-width: 100%;*/
	color: #FFF;
	font-size: 0.8rem;
	font-weight: normal;
	
	display: block;
	margin: 0;
	margin-top: 5px;
	/*background: #0CF;*/
}

/*------------------------
	連絡先
-------------------------*/
header > div:first-child address {
	width: 25%;
	min-width: 17rem;
	color: #FFF;
	text-align: left;
	margin-left: auto;
	
	/*background-color: #6C6;*/
}
header > div:first-child address p {
	width: 100%;
	font-size: 0.9rem;
	font-style: normal;
	line-height: 1.1rem;
}
header > div:first-child address p:last-child {
	font-size: 1.5rem;
	font-weight: bold;
	letter-spacing: 2px;
	/*border: thin dashed #FFF;*/
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
/** 画像 装飾Line **/
header > div:first-child > span:last-child {
	width: 100vw;
	height: 0.5rem;
	background-image: url(../img/header_line.png);
	background-repeat: repeat-x;
	background-position: center top;
	position: absolute;
	z-index: 5;
	left: 50%;
	bottom: -0.5rem;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}


/*----------------------------------
	logo
-----------------------------------
header h1 {
	margin: 0;
	padding: 0;
	border: thin dashed #900;
}*/
/*header a img.header_logo{
	display: inline-block;
	margin-left: 30px;
	margin-top: 8px;
}
@media all and (max-width: 768px) {
	header > a > img.header_logo{
		display: inline-block;
		margin-left: 0;
		margin-top: 0;
		width: 111px;
	}
}*/

/*----------------------------------------------------
	Drower [commom.js] 
	一定スクロールでheader出現 
-----------------------------------------------------*/
/** .drawer-navbar.fix追加 **/
section.drawer-navbar.fix {
	position: fixed;
	top: 0;
	z-index: 200;
	animation: fadeInDown 1s ease 0s 1 normal;
	-webkit-transition: all 0.5s;
	-ms-transition: all 0.5s;
	transition: all 0.5s;
}
main.item {
	text-align: center;
	color: #fff;
	background-image: url(../img/background_image.jpg);
	/*background-repeat: repeat-y;
	background-position: center top;*/
	background-size: contain;
	background-repeat: repeat;
	background-position: left top;
	display: block;
	padding-top: 1px;
}



/*============================================
	Slick Slideshow Carucel
=============================================*/
/** メインイメージ枠 **/
header div.MainImage {
	background-image: url(../img/backimage.jpg);
	background-repeat: repeat-x;
	background-position: left top;
	/*background-size: cover;
	border: thin dashed #F36;*/
}
header div.MainImage > div {
	width: 100%;
	max-width: 1020px;
	box-sizing: border-box;
	/*background:#F36;*/
	margin: 0 auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	/*-webkit-flex-direction: column;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-direction: column;*/
	-webkit-justify-content: flex-end;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
}
/*------------------------------------------
	Topカバー画像
-------------------------------------------*/
header div.MainImage div > picture:first-child {
	width: 100%;
	/*border: thin dashed #FF9;*/
	position: relative;
}
header div.MainImage div > picture:first-child > img {
	width: 100%;
	/*border: thin dashed #3CC;*/
	position: absolute;
	z-index: 1;
	top: 0;
	left: 50%;
	-webkit-transform: translate(-50%);
	transform: translate(-50%);
}

/*===========================================
	slider 
============================================*/
header > div.MainImage div > ul {
	width: 60%;
	/*border: thin dashed #099;
	background: #CCC;*/
	margin: 0;
	/*margin-left: auto;*/
	margin-right: 5%;
	padding: 0;
	/** flex-item *
	-webkit-align-self: flex-end;
	-ms-flex-flex-item-align: end;
	align-self: flex-end;*/
}
ul.slider {
	width: 100%;
	/*max-width: 1020px;*/
	margin:0;
	margin: 0 auto;
	padding: 0;
	/*border: thin dashed #F36;*/
	list-style-typpe: none;
	/*position: relative;
	z-index: -1;*/
}
.slick-slide {
	max-height: 380px;
	/** prev/nextボタン分 *
	margin: 0 20px;*/
}

.slick-slide img {
  width: 100%;
  /** 可変 **/
  max-width:100%;
  height:auto;
  vertical-align: bottom;/*画像下のマージンを消す*/
}

/*---------------------------------
	prev/nextボタン
----------------------------------*/
/** button本体 **/
button.slick-prev,
button.slick-next {
	/*border:thin dashed #F03;*/
	position: absolute;
	z-index: 2;
}
/** ● ボタン **/
.slick-prev:before,
.slick-next:before {
  color: black;
  /*border:thin dashed #F03;*/
  position: absolute;
  z-index:10;
  top: -4px;
  left: -4px;
}
/** 位置調整 **/
.slick-prev {margin-left:5rem;}
.slick-next {margin-right:3rem;}


/*----------------------------------
	transition設定
----------------------------------*/
.slick-slide {
  transition: all ease-in-out .3s;
  opacity: .2;
}
.slick-active {
  opacity: .5;
}
.slick-current {
  opacity: 1;
}

/*============================================================
	
==============================================================*/
@media (max-width: 64em) {
	
}







/******************************/
/**  アンカーリンク位置設定  **/
/******************************/
span.anchorlink {
	position: relative;
	top: -150px;
	display: block;
	/*border: thin dashed #F00;*/
}

/*********************/
/**  AnchorPageTop  **/
/*********************/
#topBtn{
	width: 5%;
	min-width: 45px;
	background: #D7BA8F;
	border-radius: 10px;
	box-sizing: border-box;
	padding: 1%;
	
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	
	position: fixed;
	right: 2%;
	bottom: 20px;
	z-index: 9999;
}
#topBtn picture {
	/** IE11 画像幅が伸びるバグ用 **/
	flex-shrink: 0;
}
@media all and (max-width: 768px) {
	#topBtn{
		max-width: 25px;
		position: fixed;
		right: 2%;
		bottom: 20px;
		z-index: 9999;
	}
}


/*============================
	contents下部に背景
==============================*/
main {
	/*background-image: url(../img/footer_images.png);
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: contain;*/
	background-color: #EBE7E3;
}


/*=========================================================
	BannerContents
=========================================================*/
section.BannerContents {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 60px 0 100px;
}

/*----------------------------------------
	Banner Link
-----------------------------------------*/
section.BannerContents ul {
	width: 90%;
	max-width: 60.5em;
	list-style: none;
	/*border: thin dashed #FFF;
	list-style-type: none;*/
	margin: 0 auto;
	padding: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	/*-webkit-justify-content: space-betwee;
	-webkit-box-pack: justify;
	-ms-flex-box: justify;
	justify-content: space-between;*/
	-webkit-justify-content: space-around;
	-webkit-box-pack: distribute;
	-ms-flex-box: distribute;
	justify-content: space-around;
	
	
	/*border: thin dashed #F6C;
	background: #F9C;*/
}
section.BannerContents ul li {
	width: 24%;
	/*min-width: 14rem;*/
	/*width: calc((100% / 5) - 1);*/
	margin: 0;
	/**/margin-bottom: 1%;
	padding: 0;
	/*background: #993;*/
}
/*--------------------------------
	7つ目 skybluepreshoolバナー
---------------------------------*/


section.BannerContents ul li a {
	color: #000;
	border-radius: 1rem;
	display: block;
	border: 1px solid #EBE8E3;
	/*margin: 1px;*/
	margin: 0;
	padding: 0;
	
	/*border: 1px solid #F69;*/
}
section.BannerContents ul li a:hover {
	opacity: 0.8;
	/**/box-shadow: 0 0 3px rgba(0,0,0,0.5);
	/*margin: 0 2px 2px 0;*/
	border-top: none;
	border-left: none;
	border-right: 2px solid #CCC;
	border-bottom: 2px solid #CCC;
}
section.BannerContents ul li a:active {
	opacity: 0.8;
	box-shadow: none; 
	/*margin: 2px 0 0 2px;*/
	border-top: 2px solid #CCC;
	border-left: 2px solid #CCC;
	border-right: none;
	border-bottom: none;
}
section.BannerContents ul li a picture {
	/** IE11 :active hack **/
	pointer-events: none; /* マウスのターゲットから外す */
	
 	/*background: #0C9;*/
	margin: 0;
	padding: 0;
}




/*=====================================================
	Footer
======================================================*/
footer{
	/*border: 2px dashed #F39;*/
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: #6AB9B2 !important;
	/*position: relative;
	z-index: 250;*/
}
footer div:first-child {
	width: 100%;
	max-width: 1020px;
	/*border: 2px dashed #F69;*/
	
	position: relative;
	/*top: -0.7em;*/
	margin: 0 auto;
	padding: 2% 0;
	
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	/*-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;*/
	-webkit-justify-content: space-around;
	-webkit-box-pack: distribute;
	-ms-flex-pack: distribute;
	justify-content: space-around;
	-webkit-align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	
	/*border: thin dashed #F69;*/
}

/*===================================================
	AnchorScroll △Topスクロール
=====================================================*/
/*footer div:first-child {
	width: 100%;
	background-color: #5BAD92;
	position: relative;
	top: -0.7em;
	margin: 0;
}
footer div:first-child > p {
	left: 5px;
	box-sizing: border-box;
	width: 7em;
	height: 3em;
	border: 3em solid transparent;
	/*border-left: 3em solid #012F6D;*
	border-left: 3em solid #5BAD92;
	margin: 0 auto; 
	position: absolute;
	top: -6em;
	left: 50%;
	/* rotate and center *
	-webkit-transform: rotate(-90deg) translate(0, -50%);
	-ms-transform: rotate(-90deg) translate(0, -50%);
	transform: rotate(-90deg) translate(0, -50%);
}*/

/*-----------------------------
	AnchorScroll △背景
------------------------------*/
footer div:first-child > p {
	/**反時計回りに90度回転 rotate and center **/
	position: absolute;
	top: -6em;
	left: 50%;
	-webkit-transform: rotate(-90deg) translate(0, -50%);
	-ms-transform: rotate(-90deg) translate(0, -50%);
	transform: rotate(-90deg) translate(0, -50%);
	
	/*反時計回りに回転している為、△のwidth:高さ、height:幅になる*/
	box-sizing: border-box;
	width: 5rem;
	height: 3rem;
	border: 3em solid transparent;
	border-left: 3em solid #6AB9B2;
	padding: 0;
	
	/*IE11バグの為、positionに置き換え
	flexbox内のaタグの位置(反時計回りに回転している為、justify-content:縦、align-items:横になる)
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: flex-end;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	-webkit-align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;*/
	/*background: #F03;*/
}

/*---------------------------------------
	ScrollIcon [Anchor]
---------------------------------------*/
footer div:first-child > p a {
	/*width: 3rem;*/
	color: #fff;
	text-align: center;
	font : normal 400 15px/1 'Josefin Sans', sans-serif;
	letter-spacing: .1em;
	text-decoration: none;
	/*border: thin dashed #9C3;
	background: #006;*/
	margin-left: auto;
	
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	/**/
	-webkit-box-orient: vertical;
	-webkit-box-direciton: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-justify-content: flex-end;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	
	/*bottom: 20px;
	left: 50%;*/
	/*bottom: 20%;*/
	/*display: inline-block;
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);*/
	/**/
	transition: opacity .3s;
	/** 回転 **/
	position: absolute;
	top: 50%;
	right: 0;
	z-index: 2;
	/*反時計周りに90度回転の為(上:right, 左:top, 右:bottom, 下:left)*/
	-webkit-transform: translateY(-50%) rotate(90deg) ;
	-ms-transform: translateY(-50%) rotate(90deg);
	transform: translateY(-50%) rotate(90deg);
}
footer div:first-child > p a :hover {
	opacity: .5;
	text-decoration: underline;
}
footer div:first-child > p a  {
	padding-top: 40px;
}
/** 矢印animation **/
footer div:first-child > p a span {
	position: relative;
	top: -1.5rem;
	left: 0.5px;
	width: 14px;/*矢印左側*/
	height: 14px;/*矢印右側*/
	/*margin-right: -12px;*/
	border-right: 1px solid #fff;
	border-top: 1px solid #fff;
	/*-webkit-transform: rotate(-90deg) translate(0, -50%);
	transform: rotate(-90deg) translate(0, -50%);*/
	/**animation**/
	-webkit-animation: sdb06 1.5s infinite;
	animation: sdb06 1.5s infinite;
	box-sizing: border-box;
	display: inline-block;
	margin: 0 auto;
}
@-webkit-keyframes sdb06 {
  0% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
}
@keyframes sdb06 {
  0% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
}


/*=====================================================
	Footer Logo
=====================================================*/
footer div:first-child > picture:nth-child(2) {
	width: 30%;
	margin-top: 4%;
	/*margin-right: 5%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -ms-flex;
	-webkit-justify-content: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;*/
	
	/*border: thin dashed #F6C;*/
}
footer div:first-child > picture:nth-child(2) {
	/** IE11 画像幅が伸びるバグ用 **/
	flex-shrink: 0;
}

/*===================================================== 
	FooterContents	Menu / address / SNSlink
=====================================================*/
footer div:first-child > div:nth-child(3) {
	width: 65%;
	/*background: #6CC;*/
}

/*----------------------------------------------
	FooterNav
----------------------------------------------*/
footer div:first-child > div:nth-child(3) nav {
	width: 100%;
}
footer div:first-child > div:nth-child(3) nav ul {
	/*background: #09C;*/
	list-style-type: none;
	margin: 0;
	padding: 3% 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
footer div:first-child > div:nth-child(3) nav ul li {
}
footer div:first-child > div:nth-child(3) nav ul li a {
	font-size: 0.8em;
	font-style: normal;
	color: #FFF;
	text-decoration: none;
}
footer div:first-child > div:nth-child(3) nav ul li a:hover {
	text-decoration: underline;
}

/*----------------------------------------------------------------
	address / SNS link
-----------------------------------------------------------------*/
footer div:first-child > div:nth-child(3) > div:nth-child(2) {
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

/*----------------------------------------------
	address
----------------------------------------------*/
footer div:first-child > div:nth-child(3) > div:nth-child(2) address {
	width: 70%;
}
footer div:first-child > div:nth-child(3) > div:nth-child(2) address dl {
	color: #FFF;
	font-size: 0.9rem;
	text-align: left;
	line-height: 1.1rem;
}
/*----------------------------------------------
	SNS iconLink
----------------------------------------------*/
footer div:first-child > div:nth-child(3) > div:nth-child(2) > ul {
	width: 7rem;
	list-style-type: none;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-jusitfy-content: space-between;
	-webkit-box-pack: justify;
	-ms-flex-box: justify;
	justify-content: space-between;
}
footer div:first-child > div:nth-child(3) > div:nth-child(2) > ul li {
	width: 40%;
}
footer div:first-child > div:nth-child(3) > div:nth-child(2) > ul li a {
	width: 2rem;
	height: 2rem;
	background: #EFEFEF;
	border: 2px solid #999;
	border-radius: 50%;
	padding: 2%;
	
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
footer div:first-child > div:nth-child(3) > div:nth-child(2) > ul li a picture {
	width: 65%; 
	displaly: block;
}
footer div:first-child > div:nth-child(3) > div:nth-child(2) > ul li a:hover {
	background: #FFF;
}


/*------------------------------------------
	CopyRight　
-------------------------------------------*/
footer small {
	width: 100%;
	color: #FFF;
	font-size: 0.6rem;
	letter-spacing: 2px;
	
	/*display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	position: absolute;
	left: 50%;
	bottom: 3%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);*/
}





/*============================================================================*
* ● 最大 PC size                              
*=============================================================================*/
@media (min-width: 64em) {
	
	/** 最大サイズ判定用 **/
	header {
		/*border: 2px dashed #060;*/
	}
	
	
}





/*===================================================================================
　●tablet.css 画面の横幅が768pxまで
====================================================================================*/
@media screen and (max-width: 768px) {
	
	/** tabletサイズ判定用 **/
	body {
		/*border: thin dashed #F36;*/
	}
	
	/*=========================================
		header
	==========================================*/
	body article header {
		width: 100%;
		/*background: rgba(255,255,255,0.1);*/
		background-color: #6AB9B2;
		border-top: 2px solid #FFF;
		botder-bottom: 1px solid #FFF;
		box-sizing: border-box;
		padding: 0;
		padding-top: 4.5rem;
		position: relative;
		z-index: 5;
		/*top: 3.8rem;*/
	}
	
	/*----------------------------------
		logo / 営業時間・Tel
	----------------------------------*/
	header > div:first-child {
		width: 100%;
		max-width: 1020px;
		
		margin: 0 auto;
		padding: 3px;
		
		/*display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-justify-content: space-between;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;*/
		display: block;
		
		/*background-color: #6AB9B2;
		border: thin dashed #F39;*/
	}
	
	/*-------------------------------------
		Logo
	-------------------------------------*/
	header > div:first-child h1 {
		width: 0;
		display: none;
		overflow: hidden;
		/*border: thin dashed #F6C;*/
	}
	/*header > div:first-child h1 picture {
		width: 70%;
	}*/
	/**一般社団法人 あおぞら会 広島市小規模保育事業所 *
	header > div:first-child h1 span {
		width: 100%;
		color: #FFF;
		font-size: 1rem;
		display: block;
		/*border: thin dashed #FFF;*
	}*/
	
	/*----------------------------------------
		連絡先
	-----------------------------------------*/
	header > div:first-child address {
		width: 95%;
		color: #FFF;
		text-align: left;
		margin: 0 auto;
		
		/*background-color: #6C6;*/
	}
	header > div:first-child address p {
		width: 100%;
		font-size: 0.9rem;
		font-style: normal;
		line-height: 1.1rem;
	}
	header > div:first-child address p:last-child {
		font-size: 1.5rem;
		font-weight: bold;
		letter-spacing: 2px;
		/*border: thin dashed #FFF;*/
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-align-items: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}
	
	
	/*==========================================
		  アンカーリンク位置設定
	===========================================*/
	span.anchorlink {
		position: relative;
		top: -200px;
		display: block;
		/*border: thin dashed #F00;*/
	}
	
	
	
	/*=========================================================
		BannerContents
	=========================================================*/
	section.BannerContents {
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 60px 0 30px;
	}
	
	/*----------------------------------------
		Banner Link
	-----------------------------------------*/
	section.BannerContents ul {
		width: 80%;
		max-width: 60.5em;
		list-style-type: none;
		/*border: thin dashed #FFF;
		list-style-type: none;*/
		margin: 0 auto;
		padding: 0;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-justify-content: space-betwee;
		-webkit-box-pack: justify;
		-ms-flex-box: justify;
		justify-content: space-between;
	}
	section.BannerContents ul li {
		width: 48%;
		/*width: calc((100% / 5) - 1);*/
		margin: 0;
		margin-bottom: 2%;
		padding: 0;
	}
	section.BannerContents ul li a {
		color: #000;
		border-radius: 0.5rem;
		display: block;
		margin: 1px;
	}
	section.BannerContents ul li a:hover {
		opacity: 0.8;
		box-shadow: 0 0 3px rgba(0,0,0,0.5); 
		margin: 0 2px 2px 0;
	}
	section.BannerContents ul li a:active {
		opacity: 0.8;
		box-shadow: none; 
		margin: 2px 0 0 2px;
	}
	
	
	
	
	/*=====================================================
		Footer
	======================================================*/
	footer{
		width: 100%;
		margin: 0;
		padding: 0;
		background-color: #6AB9B2 !important;
		/*position: relative;
		z-index: 250;*/
	}
	footer div:first-child {
		width: 100%;
		position: relative;
		
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-flex-direction: column;
		-webkit-box-orient: vertical;
		-ms-flex-direction: normal;
		flex-direction: column;
		-webkit-justify-content: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		
		/*border: thin dashed #F69;*/
	}
	
	/*===================================================
		AnchorScroll △Topスクロール
	=====================================================*/
	
	/*-----------------------------
		AnchorScroll △背景
	------------------------------*/
	footer div:first-child > p {
		/**反時計回りに90度回転 rotate and center **/
		position: absolute;
		top: -6em;
		left: 50%;
		-webkit-transform: rotate(-90deg) translate(0, -50%);
		-ms-transform: rotate(-90deg) translate(0, -50%);
		transform: rotate(-90deg) translate(0, -50%);
		
		/*反時計回りに回転している為、△のwidth:高さ、height:幅になる*/
		box-sizing: border-box;
		width: 5rem;
		height: 3rem;
		border: 3em solid transparent;
		border-left: 3em solid #6AB9B2;
		padding: 0;
		
		/*IE11バグの為、positionに置き換え
		flexbox内のaタグの位置(反時計回りに回転している為、justify-content:縦、align-items:横になる)
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-justify-content: flex-end;
		-webkit-box-pack: end;
		-ms-flex-pack: end;
		justify-content: flex-end;
		-webkit-align-items: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;*/
		/*background: #F03;*/
	}
	
	/*---------------------------------------
		ScrollIcon [Anchor]
	---------------------------------------*/
	footer div:first-child > p a {
		/*width: 3rem;*/
		color: #fff;
		text-align: center;
		font : normal 400 15px/1 'Josefin Sans', sans-serif;
		letter-spacing: .1em;
		text-decoration: none;
		/*border: thin dashed #9C3;
		background: #006;*/
		margin-left: auto;
		
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		/**/
		-webkit-box-orient: vertical;
		-webkit-box-direciton: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-justify-content: flex-end;
		-webkit-box-pack: end;
		-ms-flex-pack: end;
		justify-content: flex-end;
		
		/*bottom: 20px;
		left: 50%;*/
		/*bottom: 20%;*/
		/*display: inline-block;
		-webkit-transform: translate(0, -50%);
		transform: translate(0, -50%);*/
		/**/
		transition: opacity .3s;
		/** 回転 **/
		position: absolute;
		top: 50%;
		right: 0;
		z-index: 2;
		/*反時計周りに90度回転の為(上:right, 左:top, 右:bottom, 下:left)*/
		-webkit-transform: translateY(-50%) rotate(90deg) ;
		-ms-transform: translateY(-50%) rotate(90deg);
		transform: translateY(-50%) rotate(90deg);
	}
	footer div:first-child > p a :hover {
		opacity: .5;
		text-decoration: underline;
	}
	footer div:first-child > p a  {
		padding-top: 40px;
	}
	/** 矢印animation **/
	footer div:first-child > p a span {
		position: relative;
		top: -1.5rem;
		left: -2px;
		width: 14px;/*矢印左側*/
		height: 14px;/*矢印右側*/
		/*margin-right: -12px;*/
		border-right: 1px solid #fff;
		border-top: 1px solid #fff;
		/*-webkit-transform: rotate(-90deg) translate(0, -50%);
		transform: rotate(-90deg) translate(0, -50%);*/
		/**animation**/
		-webkit-animation: sdb06 1.5s infinite;
		animation: sdb06 1.5s infinite;
		box-sizing: border-box;
		display: inline-block;
		margin: 0 auto;
	}
	@-webkit-keyframes sdb06 {
	  0% {
		-webkit-transform: rotate(-45deg) translate(-20px, 20px);
		opacity: 0;
	  }
	  50% {
		opacity: 1;
	  }
	  100% {
		-webkit-transform: rotate(-45deg) translate(0, 0);
		opacity: 0;
	  }
	}
	@keyframes sdb06 {
	  0% {
		transform: rotate(-45deg) translate(-20px, 20px);
		opacity: 0;
	  }
	  50% {
		opacity: 1;
	  }
	  100% {
		transform: rotate(-45deg) translate(0, 0);
		opacity: 0;
	  }
	}

		
		
	/*=====================================================
		Footer Logo
	=====================================================*/
	footer div:first-child > div:nth-child(2) {
		width: 30%;
		margin: 4rem auto 3rem auto;
		
		display: -webkit-box;
		display: -ms-flexbox;
		display: -ms-flex;
		-webkit-justify-content: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		/*-webkit-align-items: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;*/
	}
	
	/*===================================================== 
		FooterContents	Menu / address / SNSlink
	=======================================================*/
	footer div:first-child > div:nth-child(3) {
		width: 100%;
		/*background: #6CC;*/
	}
	
	/*----------------------------------------------
		FooterNav
	----------------------------------------------*/
	footer div:first-child > div:nth-child(3) nav {
		width: 100%;
	}
	footer div:first-child > div:nth-child(3) nav ul {
		/*background: #09C;*/
		list-style-type: none;
		margin: 0;
		padding: 3% 0;
		/*display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-justify-content: space-between;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;*/
		display: block;
	}
	footer div:first-child > div:nth-child(3) nav ul li {
		width: 100%;
		min-height: 4rem;
		padding: 1px 0;
	}
	footer div:first-child > div:nth-child(3) nav ul li a {
		/*width: 100%;*/
		width: 850px;/**table-cellの為、最大サイズを指定。可変してもはみ出さないs**/
		height: 4rem;
		
		color: #FFF;
		font-size: 1rem;
		font-style: normal;
		font-weight: bold;
		text-decoration: none;
		border-top: thin solid #FFF;
		border-bottom: thin solid #066;
		background: #699;
		box-sizing: border-box;
		padding-left: 3rem;
		
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-justify-content: flex-start;
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
		-webkit-align-items: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		
		display: table-cell;
		text-align: left;
		vertical-align: middle;
	}
	footer div:first-child > div:nth-child(3) nav ul li a:hover {
		background: #3CC;
	}
	footer div:first-child > div:nth-child(3) nav ul li a:active {
		background: #3CC;
		border-top: 2px solid #066;
		border-bottom: none;
	}
	/*----------------------------------------
		IE11.hack
	----------------------------------------*/
	@media all and (-ms-high-contrast:none) {
		_:-ms-lang(x)::-ms-backdrop, footer div:first-child > div:nth-child(3) nav ul li {
			height: 4rem;
		}
		_:-ms-lang(x)::-ms-backdrop, footer div:first-child > div:nth-child(3) nav ul li a {
			width: inherit;/**親要素から継承**/
			height: 4rem;
			min-height: initial;
			background: #36C;
			display: table-cell;
			vertical-align: middle;
		}
	}
	
	/*----------------------------------------------------------------
		address / SNS link
	-----------------------------------------------------------------*/
	footer div:first-child > div:nth-child(3) > div:nth-child(2) {
		width: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-justify-content: space-around;
		-webkit-box-pack: distribute;
		-ms-flex-pack: distribute;
		justify-content: space-around;
		-webkit-align-items: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}
	
	/*----------------------------------------------
		address
	----------------------------------------------*/
	footer div:first-child > div:nth-child(3) > div:nth-child(2) address {
		width: 70%;
		/*background: #9C6;*/
	}
	footer div:first-child > div:nth-child(3) > div:nth-child(2) address dl {
		color: #FFF;
		font-size: 1rem;
		text-align: left;
		line-height: 1.5rem;
	}
	/*----------------------------------------------
		SNS iconLink
	----------------------------------------------*/
	footer div:first-child > div:nth-child(3) > div:nth-child(2) > ul {
		width: 7rem;
		list-style-type: none;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-jusitfy-content: space-between;
		-webkit-box-pack: justify;
		-ms-flex-box: justify;
		justify-content: space-between;
	}
	footer div:first-child > div:nth-child(3) > div:nth-child(2) > ul li {
		width: 40%;
	}
	footer div:first-child > div:nth-child(3) > div:nth-child(2) > ul li a {
		width: 2rem;
		height: 2rem;
		background: #EFEFEF;
		border: 2px solid #999;
		border-radius: 50%;
		padding: 2%;
		
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-justify-content: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-align-items: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}
	footer div:first-child > div:nth-child(3) > div:nth-child(2) > ul li a span {
		width: 65%; 
		displaly: block;
	}
	footer div:first-child > div:nth-child(3) > div:nth-child(2) > ul li a:hover {
		background: #FFF;
	}
	
	/*------------------------------------------
		CopyRight　
	-------------------------------------------*/
	footer small {
		width: 100%;
		color: #699;
		font-size: 0.6rem;
		letter-spacing: 2px;
		background: #FFF;
		display: block;
		padding: 5px;
	}
	
}





/*============================================================================
　●smart.css  画面の横幅が640pxまで
===============================================================================*/
@media screen and (max-width: 640px) {
	
	/*----------------------------------
		logo / 営業時間・Tel
	----------------------------------*/
	header > div:first-child {
		width: 100%;
		/*background-color: #6AB9B2;*/
		padding: 3px;
		
		/*display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-justify-content: space-between;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;*/
	}
	
	/** Logo **/
	header > div:first-child h1.Logo {
		width: 30%;
		visibility: hiden;
		display: none;
	}
	header > div:first-child h1.Logo img {
		width: 70%;
	}
	header > div:first-child h1.Logo span {
		color: #FFF;
		font-size: 0.8rem;
		/*display: block;*/
	}
	
	/** 連絡先 **/
	header > div:first-child address {
		width: 95%;
		color: #FFF;
		text-align: left;
		/*background-color: #6C6;*/
		margin: 0 auto;
	}
	header > div:first-child address p {
		width: 100%;
		font-size: 0.9rem;
		font-style: normal;
		line-height: 1.1rem;
	}
	header > div:first-child address p:last-child {
		font-size: 1.5rem;
		font-weight: bold;
		letter-spacing: 2px;
		/*border: thin dashed #FFF;*/
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-align-items: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}
	
	
	
	/*---------------------------------
		prev/nextボタン
	----------------------------------*/
	/** button本体 **/
	button.slick-prev,
	button.slick-next {
		/*border:thin dashed #F03;*/
		position: absolute;
		z-index: 2;
	}
	/** ● ボタン **/
	.slick-prev:before,
	.slick-next:before {
	  color: black;
	  /*border:thin dashed #F03;*/
	  position: absolute;
	  z-index:10;
	  top: -4px;
	  left: -4px;
	}
	/** 位置調整 **/
	.slick-prev {margin-left:3rem;}
	.slick-next {margin-right:1.8rem;}
	
		
	
	
	
	/*=========================================================
		BannerContents
	=========================================================*/
	section.BannerContents {
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 60px 0 50px;
	}
	
	/*----------------------------------------
		Banner Link
	-----------------------------------------*/
	section.BannerContents ul {
		width: 90%;
		max-width: 60.5em;
		list-style-type: none;
		/*border: thin dashed #C33;
		list-style-type: none;*/
		margin: 0 auto;
		padding: 0;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-justify-content: space-betwee;
		-webkit-box-pack: justify;
		-ms-flex-box: justify;
		justify-content: space-between;
	}
	section.BannerContents ul li {
		width: 49%;
		min-width: 30%;
		/*width: calc((100% / 5) - 1);*/
		margin: 0;
		margin-bottom: 2%;
		padding: 0;
	}
	section.BannerContents ul li a {
		color: #000;
		border-radius: 1rem;
		display: block;
		margin: 1px;
	}
	section.BannerContents ul li a:hover {
		opacity: 0.8;
		box-shadow: 0 0 3px rgba(0,0,0,0.5); 
		margin: 0 2px 2px 0;
	}
	section.BannerContents ul li a:active {
		opacity: 0.8;
		box-shadow: none; 
		margin: 2px 0 0 2px;
	}
	
	
	
	/*=====================================================
		Footer Logo
	=====================================================*/
	footer div:first-child > picture:nth-child(2) {
		width: 50%;
		margin: 3rem auto 2rem auto;
		
		display: -webkit-box;
		display: -ms-flexbox;
		display: -ms-flex;
		-webkit-justify-content: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		/*-webkit-align-items: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;*/
	}
	/*----------------------------------------------------------------
		address / SNS link
	-----------------------------------------------------------------*/
	footer div:first-child > div:nth-child(3) > div:nth-child(2) {
		width: 100%;
		display: block;
	}
	
	/*----------------------------------------------
		address
	----------------------------------------------*/
	footer div:first-child > div:nth-child(3) > div:nth-child(2) address {
		width: 95%;
		/*background: #9C6;*/
		margin: 2% auto;
	}
	footer div:first-child > div:nth-child(3) > div:nth-child(2) address dl {
		color: #FFF;
		font-size: 1rem;
		text-align: left;
		line-height: 1.5rem;
	}
	footer div:first-child > div:nth-child(3) > div:nth-child(2) address dl dt span {
		font-size: 0.9rem;
	}
	
	/*----------------------------------------------
		SNS iconLink
	----------------------------------------------*/
	footer div:first-child > div:nth-child(3) > div:nth-child(2) > ul {
		width: 7rem;
		list-style-type: none;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-jusitfy-content: space-between;
		-webkit-box-pack: justify;
		-ms-flex-box: justify;
		justify-content: space-between;
		margin: 1rem auto;
	}
	footer div:first-child > div:nth-child(3) > div:nth-child(2) > ul li {
		width: 40%;
		margin: 0 auto;
	}
	footer div:first-child > div:nth-child(3) > div:nth-child(2) > ul li a {
		width: 2rem;
		height: 2rem;
		background: #EFEFEF;
		border: 2px solid #999;
		border-radius: 50%;
		padding: 2%;
		
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-justify-content: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-align-items: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}
	footer div:first-child > div:nth-child(3) > div:nth-child(2) > ul li a span {
		width: 65%; 
		display: block;
	}
	footer div:first-child > div:nth-child(3) > div:nth-child(2) > ul li a:hover {
		background: #FFF;
	}
	
}


/*========================================================
	iphone SE size
=========================================================*/
@media screen and (max-width: 340px) {
	article {
		/*border: 2px dashed #663;*/
	}
	/*----------------------------------------------
		footer address
	----------------------------------------------*/
	footer div:first-child > div:nth-child(3) > div:nth-child(2) address {
		width: 70%;
		/*background: #9C6;*/
	}
	footer div:first-child > div:nth-child(3) > div:nth-child(2) address dl {
		color: #FFF;
		font-size: 1rem;
		text-align: left;
		line-height: 1.5rem;
	}
	/** TEL / FAX **/
	footer div:first-child > div:nth-child(3) > div:nth-child(2) address dl dd:last-child span {
		display: block;
	}
}