@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot);
  /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}
header {
    background:#fff;
}
.head {
	display: flex;
    flex-direction: row;
    padding: 0rem;
}

body {
    color: #000;
    font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
    background:#e1ddd2;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    margin:0;
	padding:0;
}

a {
	color: #000;
	text-decoration: underline;
}
a:hover {
	color: #b69b77;
	text-decoration: none;
}

img {
	max-width:100%;
	height: auto;/*高さ自動*/
}

a img:hover {
	opacity: 0.8;
    transition:all 0.2s ease 0s;
}

.infection {
background: #b69b77;
}

@media screen and (max-width: 768px){	
img {
		max-width:100%;
	}
}

h4 {
  position: relative;
  line-height: 1.4;
  padding:0.25em 1em;
  display: inline-block;
  top:0;
  font-weight: bold;
}

h4:before, h4:after { 
  position: absolute;
  top: 0;
  content:'';
  width: 8px;
  height: 100%;
  display: inline-block;
}
h4:before {
  border-left: solid 1px black;
  border-top: solid 1px black;
  border-bottom: solid 1px black;
  left: 0;
}
h4:after {
  content: '';
  border-top: solid 1px black;
  border-right: solid 1px black;
  border-bottom: solid 1px black;
  right: 0;
}

.new {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #2c2c2f;
    border-radius: 10px;/*角の丸み*/
    background: #fff;/*背景色*/
}

.new ul {
    line-height: 1.6;
}
.new p {
    margin: 0; 
    padding: 0;
}

.information h1 {
  border-radius :8px;
  position: relative;
  color: white;
  background: green;
  line-height: 1.4;
  padding: 0.5em 0.5em 0.5em 1.8em;
  margin-bottom: 1em;
  font-size: 21px;
}

.information h1:before {
  content: "◆";
  font-weight: 900;
  position: absolute;
  left : 0.5em; /*左端からのアイコンまでの距離*/
}

.information ul {
  border-radius :8px;/*角の丸み*/
  box-shadow :0px 0px 5px silver;/*5px=影の広がり具合*/
  padding: 0.5em 1em 0.5em 2.3em;
  position: relative;
  background: #fff;
  color: purple;
}
.information span{
 color: #000; /* リストの色を指定 */
}
.information ul li {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;/*ポチ消す*/
  color: purple;
}

.information ul li:before {
  content: "□";
  position: absolute;
  left : 1em; /*左端からのアイコンまで*/
  color: purple; /*アイコン色*/
}
.mark {
  background: linear-gradient(transparent 60%, #dac9b5 0%);
  font-weight: bold;
}

.overlay {/*親div*/
  position: relative;/*相対配置*/
  padding-top: 40px;
  padding-bottom: 25px;
  }

.overlay p {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 350px;
}

.scroll {
  overflow: auto; /* 横スクロールバーを表示 */
  white-space: nowrap; /* セル内にあるテキストの折り返しを禁止 */
}

.circle {
    width: 100px;
    height: 100px; 
    background-color: #fff;
    border-radius: 50%; 
    margin: 0 auto;
    text-align: center;
    line-height: 100px;
    font-size: 16px;
}

figure {
	position: relative;
	display: inline-block;
	margin-right: 20px;
	width: 400px;
}
	figure img {
		max-width: 100%;
		vertical-align: top;
	}
	figure figcaption {
		position: absolute;
		left: 0;
		bottom: 0;
		padding: 5px 10px;
		font-size: 86%;
		color: #fff;
		background: #333;
	}

/* 横並び */
.float{
    display:flex;
}
.float>div{
    width:50%;
}


/* 写真右寄せ */
.imgR {
	clear:both;
	overflow:hidden;
	margin-bottom:25px;
}
.imgR img {
	float:right;
    max-width:30%;
	margin:0 0 1em 1em;
	border-radius:0px;/*角を丸く*/   
}
@media screen and (max-width:767px) {
	.imgR {
        text-align: center;
		margin-bottom:30px;
	}
	.imgR img {
		float:none;
		max-width:100%;
		margin-left:0;
	}
    .imgR p {
		text-align:left;
	}
}

.box1 {
    width: 100%;
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #000;/*文字色*/
    text-align: left;
    background: #FFF;
    border: solid 3px #b69b77;/*線*/
    border-radius: 10px;/*角の丸み*/
}
.box1 h5 {
    margin-top: 1em; 
}
.box1 p {
    margin: 0; 
    padding: 0;
}

.box2 {
    width: 700px;
    padding: 1em 1em 0em;
    margin: 2em 0;
    color: #000;/*文字色*/
    text-align: left;
    background: #FFF;
    border: solid 3px #b69b77;/*線*/
    border-radius: 10px;/*角の丸み*/
}
.box2 p {
    margin: 0; 
    padding: 0;
}

.box3 {
    width: 40%;
    padding: 0.5em 1em 0em;
    margin: 2em 0;
    color: #000;
    text-align: left;
    background: #fdf5e1;/*背景色*/
}
.box3 ul {
    padding-bottom: 0.5em; 
}
.box3 p {
    margin: 0; 
    padding: 0;
}

.box4 {
    width: 40%;
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #000;
    text-align: left;
    background: #fff;/*背景色*/
}
.box4 p {
    margin: 0; 
    padding: 0;
}

.box5 {
    width: 100%;
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #000;
    text-align: left;
    background: #fff;/*背景色*/
}
.box5 p {
    margin: 0; 
    padding: 0;
}

.box6 {
    display:inline-block;
    position: relative;
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #000;
    text-align: left;
    background: #fff;/*背景色*/
}
.box6 p {
    margin: 0; 
    padding: 0;
}

@media screen and (max-width: 768px){
    .box1 {
    width: 100%;
}
    .box2 {
    width: 100%;
}
    .box3 {
    width: 100%;
}
    .box4 {
    width: 100%;
}
    .box5 {
    width: 100%;
}
    .box6 {
    width: 100%;
}
}

.circle {
    transform: rotate( -10deg );
    width: 100px;
    height: 100px; 
    border: 2px solid #b69b77;/* ←上下20pxのボーダー */
    background-color: #fff;
    border-radius: 50%; 
    margin: 0 auto;/* ←円を中央揃え */
    text-align: center;/* ←文字を左右に中央揃え */
    line-height: 100px;/* ←文字を上下に中央揃え */
}
.ribbon {
        display: inline-block; /* インラインブロック要素に変更 */
        position: relative; /*後に定める擬似要素の基準となる位置を親に持たせる */
        height: 60px; /* リボンの高さ */
        line-height: 60px; /* テキストを上下中央にしている */
        text-align: center; /* テキストを左右中央にしている */
        padding: 0 40px; /* 内側の隙間を縦0,横を40pxに指定 */
        font-size: 20px; /* 文字の大きさを20pxに */
        background: #b69b77; /* リボンの色 */
        color: #fff; /* 文字の色 */
}

.ribbon:before {
        content: ""; /* 擬似要素の中に入れる文字など、今回はなし */
        width: 0px; /* 擬似要素の幅 */
        height: 0px; /* 擬似要素の高さ */
        z-index: 1; /* z軸における擬似要素の位置、今回は親要素より一つ手前 */
        position: absolute; /* 子要素の位置を親要素のもつ、position: relative基準に */
        top: 0;
        left: 0;
        /* ここまで位置の指定 今回の場合親要素左上にひっついている */
        border-width: 30px 0px 30px 15px; /* borderの幅  */
        border-color: transparent transparent transparent #fff; /* borderの色 左のみ白くしている、他は透明色 */
        border-style: solid; /* borderスタイル */
}

.ribbon:after {
        content: ""; /* 擬似要素の中に入れる文字など、今回はなし */
        width: 0px; /* 擬似要素の幅 */
        height: 0px; /* 擬似要素の高さ */
        z-index: 1; /* z軸における擬似要素の位置、今回は親要素より一つ手前 */
        position: absolute; /* 子要素の位置を親要素のもつ、position: relative基準に */
        top: 0;
        right: 0;
        /* ここまで位置の指定 親要素右上にひっついている */
        border-width: 30px 15px 30px 0px;
        border-color: transparent #fff transparent transparent; /* borderの色 右のみ白くしている、他は透明色 */
        border-style: solid;
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  /* Preferred icon size */
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  display: inline-flex;
  vertical-align: middle;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

/* Rules for sizing the icon. */

.material-icons.md-30 {
  font-size: 30px;
}

.material-icons.md-36 {
  font-size: 36px;
}

.table > :not(caption) > * > * {
  vertical-align: middle;
}

@media screen and (max-width: 768px){
.table {
    font-size:87.5%;
}
}
.price {
    margin-top: 50px
}
.price table {
    margin-bottom:10px;
}
.price th,td {
    padding:5px 20px 5px 20px;
}

.time table {
	width:100%;
	margin-bottom:1em;
	border-collapse:collapse;
	border:1px solid #d9d4c9;
}
.time th {
	padding:10px;
	text-align:center;
	vertical-align:middle;
	border:1px solid #d9d4c9;
    background:#eeeeee;
}
.time td {
	padding:10px;
	border:1px solid #d9d4c9;
    background:#fff;
}

.bg-secondary-fnav{
    background-color:#7ec8da!important
}

.bg-secondary{
    background-color:#6c757d!important
}

/* フローティングメニュー */

.floating-nav {
  color: white;
  position: fixed;
  width: 50px;
  right: 0;
  top: 10%;
  cursor: pointer;
  opacity: 0.85;
}

.floating-nav a {
  color: white;
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-decoration: none;
}

#page_top {
    position: fixed;
    bottom: 50px;
    right: 20px;
}
#page_top a {
    background-color: #999;
    color: #fff;
    text-align: center;
    text-decoration: none;
    padding: 15px 15px;
    opacity: 0.85;
}
#page_top a:hover {
    opacity: 1.0;
    text-decoration: none;
}

/*改行*/
  .br-pc { display:block; }
  .br-sp { display:none; }

@media screen and (max-width: 768px){	
  .br-pc { display:none; }
  .br-sp { display:block; }
}

/*PC版表示*/
.pc_area{
  display:block;
}
.sp_area{
  display:none;
}


/*スマホ版表示*/
@media screen and (max-width: 768px){
  .pc_area{
    display:none;
  }
  .sp_area{
    display:block;
  }
}

/*画像を重ねる
-------------------------------------*/
.ireko_char {
	position:absolute;
	top:20%;
	left:10%;
	font-size:150%;
	font-weight:bold;
	color:#00528d;
}
.ireko_gazo {
	position:absolute;
	bottom:5%;
	left:60%;
	max-width:75%;
	max-height:75%;
}
@media only screen and (max-width: 480px) {
	.ireko_char {font-size:100%;}
}
@media only screen and (min-width:481px) and (max-width:780px) {
	.ireko_char {font-size:120%;
    }
	.ireko_gazo {left:75%;
    }
}

/****--------- 登場 ---------****/
.appearance{
  opacity:0;
  animation:appearance 2.5s 1s 1 forwards;
  -webkit-animation:appearance 2.5s 1s 1 forwards;
  -moz-animation:appearance 2.5s 1s 1 forwards;
}
@keyframes appearance{
  0%{opacity:0; transform:translate(0,200px);}
  10%{opacity:1; transform:translate(0,-50px);}
  15%{opacity:1; transform:translate(0,0px);}
  20%{opacity:1; transform:translate(0,-20px);}
  25%{opacity:1; transform:translate(0,0px);}
  100%{opacity:1; transform:translate(0,0px);}
}
@-webkit-keyframes appearance{
  0%{opacity:0; -webkit-transform:translate(0,200px);}
  10%{opacity:1; -webkit-transform:translate(0,-50px);}
  15%{opacity:1; -webkit-transform:translate(0,0px);}
  20%{opacity:1; -webkit-transform:translate(0,-20px);}
  25%{opacity:1; -webkit-transform:translate(0,0px);}
  100%{opacity:1; -webkit-transform:translate(0,0px);}
}
@-moz-keyframes appearance{
  0%{opacity:0; -moz-transform:translate(0,200px);}
  10%{opacity:1; -moz-transform:translate(0,-50px);}
  15%{opacity:1; -moz-transform:translate(0,0px);}
  20%{opacity:1; -moz-transform:translate(0,-20px);}
  25%{opacity:1; -moz-transform:translate(0,0px);}
  100%{opacity:1; -moz-transform:translate(0,0px);}
}