body{
font-family: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ',Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    line-height: 1.6;
	overflow-x: hidden; 
}

a:hover{
	opacity: 0.7;         /* カーソル時透明度 */
}

.stress{
	font-weight: bold;
	color: #26B7BC;
}


/* 見出しデザイン */

h1{
	padding: 10px 30px 5px 30px;
	text-align: center;
	font-size: 40px;
	display: inline-block;
	font-weight: bold;
	margin-bottom: 20px;
	color: #ffffff;
	text-shadow:1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000;
	border-bottom: solid 5px rgba(253,3,7,1.00);
}


h2 {
  position: relative;
  padding: 5px 15px 8px 7px;
	background: rgba(240,244,174,1.00);
	display: inline-block;
	font-weight: bold;
	margin-bottom: 10px;
}
h2:before {
  position: absolute;
  top: -5px;
  left: -5px;
  width: 100%;
  height: 100%;
  content: '';
  border: 1px solid #26B7BC;
}


h3 {
	position: relative;
	padding: 10px 30px 5px 30px;
	text-align: center;
	background: rgba(251,249,242,1.00);
	font-size: 25px;
	max-width: 80%;
	border-radius: 50px;
	box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, .3);
	display: inline-block;
	font-weight: bold;
	margin-bottom: 30px;
	margin-top: 40px;
}
h3:before {
  position: absolute;
  content: url(../img/s.png);
}
h3:before {
  top: -40px;
  left: calc(50% - 40px);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(251,249,242,1.00);
}
h3 i{
  line-height: 60px;
  position: absolute;
  z-index: 1;
  top: -40px;
  left: calc(50% - 40px);
  width: 80px;
  height: 60px;
  text-align: center;
}
h3 span {
	position: relative;
	z-index: 1;
	color: #DCE817;
	text-shadow:1px 1px 0 #319BD0,-1px 1px 0 #319BD0,1px -1px 0 #319BD0,-1px -1px 0 #319BD0;
}

h4 {
    text-align:  center;    /* 文字位置指定 */
	font-weight: bold;
	border-bottom: 4px solid #F9E034;
	color: #049696;
}
h4 span {
	display: block;/* ブロック要素にする */
	color: #DD3166;
	line-height: 1;
}




h5 {
  position: relative;
  padding: 1rem .5rem;
	font-size: 120%;
	font-weight: bold;
}

h5:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;
  content: '';
  border-radius: 3px;
  background-image: -webkit-gradient(linear, right top, left top, from(#2af598), to(#009efd));
  background-image: -webkit-linear-gradient(right, #2af598 0%, #009efd 100%);
  background-image: linear-gradient(to left, #2af598 0%, #009efd 100%);
}



/* contener */
.contener2{
	padding-top: 20px;
	padding-bottom: 80px;
	background: url("../img/backgw.png") center top/cover repeat;
}

.contener3{
	background: url("../img/bar02.jpg");
	padding-top: 40px;
	padding-bottom: 50px;
	text-align: center;
	
}
.contener4{
	margin-bottom: 40px;
	padding-bottom: 30px;
	
	
}
.contener5{
	padding-bottom: 70px;
}
.contener6{
	padding-top: 15px;
	padding-bottom: 15px;
	margin-top: 60px;
	margin-bottom: 50px;
	/*background: url("../img/backgw.png") center top/cover repeat;*/
background: #FFF193;
background-image: linear-gradient(90deg, #FFFFFF 50%, transparent 50%), linear-gradient(#FFFFFF 50%, transparent 50%);/* チェック色 */
background-size: 5px 5px;	/* チェックのサイズ */
}
.contener7{
	margin-top: 30px;
	margin-bottom: 30px;
}
.contener8{
	margin-top: 30px;
	margin-bottom: 100px;
}



/* リンクボタン */
.menu{
	width: auto;
	font-weight: bold;
	text-align: center;
}

nav {
	background: url("../img/bar01.jpg");
	
}
nav ul {
    display: flex;
    flex-flow: row;
	justify-content: flex-end;
    margin: 0;
    padding: 3px 7px 0 7px;
	align-items: center;
	white-space: nowrap;
}

.menu nav ul li a {
  display:block;
	margin: 0 10px;
	color: #00CED1;
}
.menu nav ul li a dl {
	display: flex;
	align-items: center;
	padding-left: 3px;
}

.menu nav ul li a dl dt img{
	height: 30px;
}
.menu nav ul li a dl dd {
	margin: 0 5px;
	font-weight: bold;

	
}

nav li+ li {
	
}


nav a{
    box-shadow: 0 3px 0 0 #ffffff;
	background-color: #ffffff;
	display: inline-block;
	padding: 0.5em 1em;
	cursor: pointer;
	transition: all 0.3s ease 0s; 
	border-radius: 15px 15px 0 0;
	text-decoration: none;

}

nav a:hover{
	box-shadow: 0 10px 2px 0 #ffffff;
	transform: translateY(-0.5em);
	
}
nav a::after {
}


/* TOP画面 */
.contener1{
	min-height: 300px;	
	background: url("../img/top01.jpg") center top/cover no-repeat;
	width: 100%;
    margin:0 auto;
	position: relative;
}
.top-ss{
		display: none;
}
.top{
	position: relative;
}

.top-logo img{
	width: 100%;
	text-align: center;
	height: 100px
}

.top-logo{
	position: absolute;
	left:  2%;
	top: 10px;
}
.poyooon {
  animation: poyooon 0.9s linear 0s 1;
}
@keyframes poyooon {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  10%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  40%  { transform: scale(1.2, 0.8) translate(0%, 15%); }
  50%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  60%  { transform: scale(0.9, 1.2) translate(0%, -100%); }
  75%  { transform: scale(0.9, 1.2) translate(0%, -20%); }
  85%  { transform: scale(1.2, 0.8) translate(0%, 15%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}
.catch{
	position: absolute;
	top: 15%;
	left: 46%;
	overflow: visible;
	color: #ffffff;
	max-width: 700px;
	padding-right: 8px;
	
}
.catch p{
	font-size: 180%;
	font-weight: bold;
}




/* 最初に*/
.intro{
	width: 80%;
	text-align: center;
	margin: 20px auto;	
}
.intro-img{
	width: 100%;
}
.intro-img img{
	width: 100%;
	height:auto;
}



/* 費用に含まれるもの*/
.include{
	width: 90%;
	text-align: center;
	margin: 5px auto;	
	background: #ffffff;
}
.includebox01{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: flex-start;
}	

.include section{
	padding: 5px;
	width: 30%;
	margin: 3px;
}


.include-img img{
	width: 90%;
}


.include-sent{
	margin: 0;
	padding: 10px 15px;
	text-align: center;
}

.include-sent p{
	text-align: left;
	font-size: 80%;
}
.include .point{
	text-align: left;
}



/* メッセージ */

.merit{
	width: 80%;
	text-align: center;
	margin: 20px auto;	
}
	
.merit-sent{
	padding: 10px;
}
.merit-sent p{
	text-align: left;
	margin-top: 20px;
}



/*制作の流れ*/
.flow{
	width: 80%;
	text-align: center;
	margin: 20px auto;	
}
.flow-sent{
	padding: 10px;
	text-align: left;
}
.flow-img{
	padding: 20px;
}
.flow-img img{
	width: 60%;
	height: 60%;
}
.flow section{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin-bottom: 60px;
}




/*オリヴァークリニック*/
.samplepage{
	padding: 50px;
	background: rgba(249,235,158,0.42);
	border-radius: 10px;
	border: solid 4px rgba(1,197,221,1.00);
	box-shadow: 2px 2px 4px gray;
	height: 400px;/*スクロールの高さ*/
	overflow-y: scroll;
	margin:  0 30px;
}
/* リンクボタン */
.menu-sample{
	width: auto;
	font-weight: bold;
	text-align: center;
	padding-bottom: 10px;
	padding-top: 15px
}

.menu-sample nav {
	background: url("../sample/img/part02.png");
}

.menu-sample nav {
}
.menu-sample nav ul {
    display: flex;
    flex-flow: row;
	justify-content: center;
    margin: 0;
    padding: 3px 7px;
	align-items: center;
	white-space: nowrap;
}

.menu-sample nav ul li a {
  display:block;
	
}
.menu-sample nav ul li a dl {
  display: flex;
  align-items: center;
	padding-left: 3px;
		
}

.menu-sample nav ul li a dl dt img{
	height: 30px;
}
.menu-sample nav ul li a dl dd {
	font-size:110%;
	margin: 0 5px;
	font-weight: bold;
	color: #CF8212;
}


.menu-sample nav a{
    padding: 2px 7px;
	position: relative;
	display: inline-block;
	text-decoration: none;
}
.menu-sample nav ul li a dl dt img:hover:after {
}
.menu-sample nav a:hover{
color: rgba(253,87,1,1.00);
}
.menu-sample nav a::after {
  position: absolute;
  bottom: -2px;
  left: 0;
  content: '';
  width: 100%;
  height: 50px;
  background: rgba(245,186,13,0.44);
  transform: scale(0, 1);
  transform-origin: center top;
  transition: transform .4s;
	border-radius: 5px;
}
.menu-sample nav a:hover::after {
  transform: scale(1, 1);
}



/* TOP画面 */
.contener1-sample{
	min-height: 400px;	
	background: url("../img/top01-sample.png") center top/cover no-repeat;
	width: 100%;
    margin:0 auto;
	position: relative;
}

.sample-sss{
	display: none;
}

.top-sample{
	position: relative;
}
.top-logo-sample{
	position: absolute;
	left: 0;
	top: 20px;
}
.top-logo-sample img{
	width: 100%;
	text-align: center;
	height: 100px
}
.top-ss-sample{
	display: none;
}

.taskcal{
	position: absolute;
	top: 50%;
	right: 50%;
	z-index: 10;
}

.taskcal{
animation: korokoro 2.5s linear 0s 1;
}
.top-text{
	position: absolute;
	top: 24%;
	right: 48%;
	z-index: 11;
}
.top-textbox {
	position: relative;
    padding: 0.8em 0.8em;
    margin: 2em 0;
    background: #ffffff;
    color:rgba(253,119,2,1.00);
	font-size: 120%;
    font-weight: bold;
	border-radius: 15px;
	box-shadow: 10px 5px 5px rgba(253,119,2,0.3);
	 animation: img_box_9955 3s linear infinite;
  transform-origin: 50% 50%;
}

.cal-sample{
	position: absolute;
	left: 50%;
	top: 20px;
}
.cal-sample img{
	width: 100%;

}
@keyframes img_box_9955 {
  0% { transform: translateY(0) }
  33.33333% { transform: translateY(-10px) }
  66.66667% { transform: translateY(0) }
  100% { transform: translateY(0) }
}

.top-textbox:after {
    position: absolute;
    content: '';
    top: 100%;
    right: 30px;
    border: 15px solid transparent;
    border-top: 15px solid #ffffff;
    width: 0;
    height: 0;
}

.top-textbox p {
    margin: 0; 
    padding: 0;
}



@keyframes korokoro {
  0%   { transform: translate(0%, 0%); }
  15%   { transform: translate(10%, 0%) rotate(5deg); }

  30%  { transform: translate(20%, 0%) rotate(-5deg); }

  45%  { transform: translate(30%, 0%) rotate(5deg); }

  60%  { transform: translate(20%, 0%) rotate(-5deg); }

  75%  { transform: translate(10%, 0%) rotate(5deg); }
  100% { transform: translate(0%, 0%) rotate(0deg); }
}

/* contener */

.contener2-sample{
	background: url("../sample/img/part02.png") center top/cover no-repeat;
	padding-top: 50px;
	padding-bottom: 40px;

}

/* 最新のお知らせ */

.news{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
} 
.newsbox01{
	width: 70%;
}

.text{
	padding: 10px;
	background: #ffffff;
	border-radius: 10px;
	border: solid 4px rgba(243,70,3,0.50);
	box-shadow: 2px 2px 4px gray;
	height: 400px;/*スクロールの高さ*/
	overflow-y: scroll;
}

.news-img{
	width: 35%;
	margin-left: 1%;
}
.news-img img{
	width: 100%;
	height:auto;
}

.text ul{
	padding: 10px;
	
}

.text li {
	line-height:2.0em;
	border-bottom: 1px dashed #F34603;
	list-style-position: inside;
	text-align: left;
}
.text li.last{
	border-bottom: none;
}

.stress-sample{
	color:rgba(4,107,51,1.00);
	font-weight: bold;
	font-size: 110%;
}



/*オリヴァークリニックここまで*/


.flow02{
	width: 90%;
	text-align: center;
	margin: 5px auto;	
}
.after-flow{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;
}
.after-flow section{
	padding: 15px;
	width: 15%;
	margin: 20px 10px ;

}
.after-flow img{
	width: 100%;
}
.after-flow p{
	font-size: 90%;
	padding-top: 5px;
	text-align: left;
}


/* 制作事例 */
.works{
width: 90%;
text-align: center;
margin: 5px auto;	
}
.works-box{
display: flex;
flex-direction: row;
justify-content: space-around;
align-content: space-around;
width: 100%;
flex-wrap: wrap;
}
.works section{
padding: 15px;
width: 25%;
margin: 10px;
border: solid 2px #F4D53E;
box-shadow: 2px 2px 4px gray;
border-radius: 15px;
background: #FFFFFF;
}
.works-box img{
width: 100%;
}
.works-box p{
font-size: 85%;
padding-top: 5px;
text-align: center;
color: rgba(45,49,61,1.00);
}



/*仕切り線*/
.part01-sample{
	min-height: 100px;	background: #ffffff url("../sample/img/part02.png") center top/cover no-repeat;
	width: 100%;
    margin:03 auto;
	position: relative;
}


/*　お問い合わせ　*/
.formbox{
	text-align: center;
}


/*　フッター　*/

footer{
    background: url("../img/s-back.png") center top/cover no-repeat;
    text-align: center;
    padding: 30px;
}
footer img{
	width: 20%;
}





/*　iPadサイズ　----------------------------------*/

@media screen and (max-width: 768px){

.menu,.part01{
	display: none;
}
h1{
	font-size: 20px;
}
h2,h3,h4{
	font-size:18px;
}
h1{
	padding: 2px 5px 5px 5px;
}
h3 span {
  font-size:  20px;    
}

/* TOP画面 */
.contener1{
display: none;
}

.top{
	position: static;
}
.top-logo{
	position: absolute;
	left: 2%;
	top: 10px;
}
	
.top-logo　img{
	width: 80%;
	height: 80%;
}
.top-ss{
	display: block;
}
.top-ssimg{
	position: relative;
}	
.top-ssimg img{
	width: 100%;
}
.catch{
	top: 20%;
	left: 46%;
	max-width: 700px;
	padding-right: 8px;
}
.catch p{
	font-size: 120%;
	font-weight: bold;
}
.catch-text{
	font-size: 100%;
}

	
/*コンテナ*/	
.contener2{
	margin-bottom: 5px;
	padding-bottom: 20px;
}
.contener3{
	margin-bottom: 20px;
	padding-bottom: 25px;
}	
.contener4{
	padding-top: 20px;
	padding-bottom: 20px;
}
.contener5{
	padding-bottom: 20px
}
.contener6{
	margin-top: 20px;
	margin-bottom: 20px;
}
	

/* 最初に*/
.intro{
	width: 90%;
	margin: 10px auto;	
}

.intro-img img{
	height:120%;
}


/* 費用に含まれるもの*/
.include{
	width: 90%;
}
.includebox01{
	flex-direction: column;
}	

.include section{
	padding: 0 5px;
	width: 100%;
	margin: 0 5px;
}

.include-img img{
	width: 85%;
}

.include-sent{
	margin: 0;
	padding: 10px 15px;
}

.include-sent p{
	font-size: 95%;
}


/* メッセージ */

.merit{
	width: 90%;
	text-align: center;
	margin: 20px auto;	
}
	


.merit-sent{
	padding: 10px;
}

.merit-sent p{
	margin-top: 20px;
}


/*オリヴァークリニック*/
.sample-pcs{
	display: none;
}
.sample-sss{
	display: block;
}
.sample-sss img{
	}
.samplepage{
	padding: 5px;
	margin:  0 5px;
}


/*オリヴァークリニックここまで*/
	
	
	
	
	
	
	
	

/*制作の流れ*/
.flow{
	width: 90%;
	text-align: center;
	margin: 20px auto;	
}
.flow-sent{
	padding: 10px;
}
.flow-img{
	padding: 3px;
	
}
.flow-img img{
	width: 100%;
	height: auto;
}
.flow section{
	flex-direction: column;
	margin-bottom: 30px;
}
.flow02{
	width: 80%;
	margin: 5px auto;	
}
	
.after-flow{
	flex-direction: column;
}
.after-flow section{
	padding: 10px;
	width: 90%;
	margin: 5px;
}
	.after-flow img{
		width: 80%;
		height: 80%;
	}
.after-flow p{
	font-size: 95%;
	padding: 10px;
}


/* 制作事例 */
.works{
width: 80%;
margin: 5px auto;	
}
.works-box{
	flex-direction: column;
}
.works-box section{
	padding: 10px;
	width: 90%;
	border: solid 2px #F4D53E;
	box-shadow: 1px 1px 2px gray;
}
.works-box img{
	width: 100%;
}
.works-box p{
	font-size: 100%;
	padding-top: 5px;
	text-align: center;
}




/*  ワクチン・健診 */
.vaccine {
	flex-direction: column;
}

.vaccine-box,.examination-box,.first-box {
	padding: 10px;
	width: 90%;
	border: solid 3px rgba(156,224,243,0.85);
	box-shadow: 1px 1px 2px gray;
}
.vaccine-text,.examination-text,.first-text{
	margin: 0;
	padding: 10px;
}



	
	
	
.footer img{  
	width: 50%;
}
	
	
	
}







/*　スマホサイズ　----------------------------------*/

@media only screen and (max-width:479px) {
	
	
.top-logo img{
	width: 50%;
	height: 50%;
}

.catch{
	top: 13%;
	left: 30%;
	padding-right: 8px;
	font-size: 90%;
}
.catch p{
	font-size: 100%;
	font-weight: bold;
}
.catch-text{
	font-size: 80%;
	text-align: right;
	padding-left: 5px;
}
.footer img{  
	width: 80%;
}

	
.intro p{
		font-size: 75%;
}
	
	
	

}