@charset "UTF-8";

/*css document */
/*style.css*/

html, body {
  height: 100%;
}

/*
font-family: 'Lora', serif;
font-family: 'Dancing Script', cursive;
font-family: "M PLUS 1p";
font-family:'Sawarabi Mincho', serif;
*/

/*============================
==============================
ここからindex.html
==============================
=============================*/

.wrap {
  height: 100%;
}

.header_outer {
  width: 100%;
  height: 150px;
  padding: 15px 0 0;
  background-color: rgba(0, 177, 255, 0.20);
  background-image: url("images/wet-snow.png");
  color: #444444;
}

header {
  width: 90%;
  max-width: 1060px;
  margin: 0 auto;
}

#headline {
  text-align: center;
  
  display: -webkit-box; /* Android4.3以下、Safari3.1〜6.0 */
  display: -webkit-flex; /* Safari6.1以降 */
  display: -ms-flexbox; /* IE10 */
  display: flex;
  
  -webkit-box-pack: justify; /* Android4.3以下、Safari3.1〜6.0 */
  -webkit-justify-content: space-between; /* Safari6.1以降 */
  -ms-flex-pack: justify; /* IE10  */
  justify-content: space-between;
  
  -webkit-box-align: end; /* Android4.3以下、Safari3.1〜6.0 */
  -webkit-align-items: flex-end; /* Safari6.1以降 */
  -ms-flex-align: end; /* IE10  */
  align-items: flex-end;
}

.logo{
  max-width: 100%;
}

.logo img {
  width: auto;
}

.header_container {
  display: -webkit-box; /* Android4.3以下、Safari3.1〜6.0 */
  display: -webkit-flex; /* Safari6.1以降 */
  display: -ms-flexbox; /* IE10 */
  display: flex;
  
  -webkit-box-pack: end; /* Android4.3以下、Safari3.1〜6.0 */
  -webkit-justify-content: flex-end; /* Safari6.1以降 */
  -ms-flex-pack: end; /* IE10  */
  justify-content: flex-end;
  
  -ms-flex-line-pack: justify;
  align-content: space-between;/* IE10  */
  
  -webkit-flex-wrap: wrap; /* Android4.3以下、Safari3.1〜6.0 */
  -ms-flex-wrap: wrap; /* Safari6.1以降 */
  flex-wrap: wrap;
  height: 120px;
  width: 100%;
}

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

.header_link ul {
  display: -webkit-box; /* Android4.3以下、Safari3.1〜6.0 */
  display: -webkit-flex; /* Safari6.1以降 */
  display: -ms-flexbox; /* IE10 */
  display: flex;
  
  -webkit-box-pack: end; /* Android4.3以下、Safari3.1〜6.0 */
  -webkit-justify-content: flex-end; /* Safari6.1以降 */
  -ms-flex-pack: end; /* IE10 */
  justify-content: flex-end;
  max-width: 100%;;
}

.header_link li{
  width: auto;
/*  margin: 0 0 0 40px;*/
  position: relative;
  white-space: nowrap;
  font-family: 'Lora', serif;
  font-size: 1.7rem;
}

/*
.header_link li:before {
  position: absolute;
  content:'';
  top: 0.1em;
  left: -1em;
  height: 0;
  width:0;
  border-style: solid;
  border-width: 5px 0 5px 10px;
  border-color: transparent transparent transparent #5c3b32;
}
*/

/*
.header_link li a{
  width: auto;
  letter-spacing: 1px;
  font-weight: 300;
  color: #555555;
  font-size: 1.4rem;
}

.header_link li a:hover{
  text-decoration: underline;
}
*/

.header_link li span {
  font-size: 80%;
  font-family: 'Lora', serif;
}

#g_nav {
  width: 472px;
  overflow: hidden;
  position: relative;
}

#g_nav li{
  float: left;
/*  padding: 0 24px;*/
  line-height: 1.6rem;
  border-left: 1px solid #888888;
  margin-left: 20px;
  padding-left: 20px;
}

#g_nav li:first-child {
  border-left: none;
  margin-left: 0;
  padding-left: 0;
}

#g_nav li a {
  font-size: 1.6rem;
  display: inline-block;
  color: #444444;
  font-family: 'Lora', serif;
  letter-spacing: 1.5px;
  transition: all  0.3s ease;
}

#g_nav li a:hover {
  background: rgba(0, 177, 255, 0.25);
  opacity: 0.7;
}

/*============================
ここからindex.htmlのmain
=============================*/

main {
  width: 100%;
}

.main_inner {
  max-width: 1060px;
  margin: 20px auto;
  position: relative;
  display: block;
}

/* ここからスライダー */

.swiper-container {
  max-width: 1060px;
  padding: 30px 0 50px;
  margin: 40px 0 40px;
}

.swiper-container img{
  max-width: 100%;
}

.s-fade-wrap {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
}

.s-fade-text {
  position: absolute;
  top: 75%;
  left: 0;  
  margin: 0 auto;
  width: 100%;
  color: #444444;
  line-height: 1.1;
  font-size: 4.3rem;
  text-align: center;
/*  font-size: 4vw;*/
  color: #333333;
  text-shadow: 1px 1px 0 #fff,
    -1px 1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff;
  
  text-shadow: 1px 1px 3px #fff,
    -1px 1px 3px #fff,
    1px -1px 3px #fff,
    -1px 1px 3px #fff;
  font-family: "M PLUS 1p";
}

.swiper-slide-active .s-fade-text {
  animation: slideTextFade 1.5s ease 0s 1 normal;
}

@keyframes slideTextFade {
  0%, 25% {
    transform: translateX(50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

/* ここまでスライダー */







#main_column {
  width: 100%;
  margin: 0 auto;
  color: #444444;
  text-align: center;
}

/* ここからメニューボタン */

#greeting {
  width: 94%;
/*
  background-color: rgba(0, 177, 255, 0.20);
  background-image: url("images/wet-snow.png");
*/
  padding: 2% 0px;
  margin: auto;
/*    margin: 0 calc(50% - 50vw);*/ 
  font-size: 0;
}

#greeting section {
  display: inline-block;
  width: 65%;
  padding: 0 3% 0 0; 
  vertical-align: top;
}

#greeting h2 {
  font-size: 2rem;
  line-height: 1.3;
  font-family: 'Lora', serif;
}

#greeting p {
  font-size: 1.5rem;
  margin: 2% 0 0 0;
  line-height: 1.5;
  text-align: justify;
}

#greeting .pict_box {
  display: inline-block;
  width: 32%;
}

#greeting .pict_box img {
  width: 100%;
}

.news_box {
  width: 94%;
  padding: 0 0 1%;
  margin: auto;
  font-size: 0;
  
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.news_box .blog {
  position: relative;
  width: 49%;
/*  max-height: 120px;*/
  border-radius: 10px;
  box-shadow: 0 0 2px rgba(0, 177, 255, 1);
  vertical-align: top;
  margin: 3% 2% 0 0%;
  background: url("images/home/blog_button02.jpg");
  background-size: cover;
  background-position: 50% 25%;
  background-repeat: no-repeat;
  transition: 0.1s;
}

.news_box .tenshi_hane {
  position: relative;
  width: 49%;
/*  max-height: 120px;*/
  border-radius: 10px;
  box-shadow: 0 0 2px rgba(0, 177, 255, 1);
  vertical-align: top;
  margin: 3% 0 0 0%;
  background: url("images/home/tenshi_hane_button.jpg");
  background-size: cover;
  background-position: 50% 35%;
  background-repeat: no-repeat;
  transition: 0.1s;
}

.news_box .blog:hover, .news_box .tenshi_hane:hover {
  transform: rotate(-5deg);
  box-shadow: 1px 1px 5px #555555;
}

.news_box .blog a, .news_box .tenshi_hane a {
  width: 100%;
  display: block;
  padding: 12% 5% 9%;
  text-align: center;
  margin: auto;
}

.blog a h2, .tenshi_hane a h2  {
  display: inline-block;
  font-size: 2rem;
  color: #444444;
  line-height: 1.3;
  text-align: center;
  font-family: "M PLUS 1p", sans-serif;
  letter-spacing: 1.5px;
  text-shadow: 1px 1px 2px #fff,
    0 0 2px #fff,
    0 0 2px #fff;
}

.news_box .blog_title, .news_box .tenshi_hane_title {
  position: absolute;
  top: -18px;
  right: -10px;
  color: #fff;
  background: rgba(0, 177, 255, 1);
  border-radius: 10px 10px 10px 10px;
  padding: 3% 5%;
  font-size: 2rem;
}

/* 旧ブログここから */

.past_blog {
  font-size: 1.5rem;
  padding: 3% 0%;
  text-align: left;
  width: 100%;
}

.past_blog a {
  color: #444444;
  text-decoration: underline;
  transition: 0.5s;
}

.past_blog a:hover {
 color: #888888; 
}

/* 旧ブログここまで */

.news_box .news_link {
  width: 70%;
  max-height: 140px;
  padding: 2%;
  background: rgba(238, 238, 238, 0.44);
  margin: 3% 0 0 0%;
  vertical-align: top;
/*  border: 1px solid #888888;*/
  font-size: 1.4rem;
  overflow-y: scroll;
}

.news_box .news_link dl{
  width: 100%;
  line-height: 1.3;
  overflow: hidden;
}

.news_box .news_link dt{
  float: left;
  clear: both;  /* クリアを解除 */
  padding: 2% 0 2% 5%;
}

.news_box .news_link dd{
  border-bottom: 1px dashed #888888;
  text-align: left;
  padding: 2% 0 2% 30%;
}

.news_box .news_link dd.important{
  background: rgba(255, 196, 0, 0.3);
}

.news_box .news_link a {
  color: #444444;
  text-decoration: underline;
  transition: 0.5s;
}

.news_box .news_link a:hover {
  color: #888888;
}

.rec_list {
  width: 94%;
  margin: 0 auto;
}

li.rec_bt01 {
  max-width: 32%;
/*  height: 90%;*/
  margin: 2% 2% 0 0;
  background-color: rgba(0, 177, 255, 0.20);
  background-image: url("images/wet-snow.png");
  float: left;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 0 2px rgba(0, 177, 255, 1);
}

li.rec_bt01:nth-child(3n)  {
  margin: 2% 0 0 0;
}

li.rec_bt01 img {
  width: 100%;
  padding: 8px;
}

li.cl_pink {
  background-color: rgba(255, 0, 128, 0.2);
  box-shadow: 0 0 2px rgba(255, 0, 128, 1);
}

li.cl_green {
  background-color: rgba(0, 255, 88, 0.2);
  box-shadow: 0 0 2px rgba(0, 255, 88, 1);
}

.rec_image {
  position: relative;
  color: #555555;
  display: block;
  transition: all 0.2s linear;
  filter: brightness(100%);
  -webkit-filter: brightness(97%); /* Chrome Safari */
  -moz-filter: brightness(97%);    /* Firefox */
  -o-filter: brightness(97%);     /* Opera */
  -ms-filter: brightness(97%);    /* Internet Explorer */
/*  border: 1px solid #888888;*/
  padding-bottom: 19%;
}

.rec_image:hover {
  color: #555555;
  transform: scale(1.02);
  filter: brightness(105%);
  -webkit-filter: brightness(105%); /* Chrome Safari */
  -moz-filter: brightness(105%);    /* Firefox */ 
  -o-filter: brightness(100%);      /* Opera */
  -ms-filter: brightness(100%);     /*Internet Explorer */
}

.rec_name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  background: rgba(255, 255, 255, 0);
  color: #333333;
  transition: all 0.2s linear;
}

.rec_name:hover {
  background: rgba(0, 0, 0, 0.5);
  color: #ffffff;
/*  text-shadow: none;*/
}

.rec_name h2 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10%;
  margin: 0 auto;
  font-size: 1.6rem;
}

.rec_name p {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4%;
  margin: 0 auto;
  font-size: 1.5rem;
}


.rec_name h2:after {
  font-family: 'icoarrow';
  content: "\e901";
  font-size: 80%;
  position: relative;
  top: 0px;
  left: 3px;
}




/*********************************
ここからindex.htmlのfooter
*********************************/

#footer_wrap {
  max-width: 100%;
  margin: 140px auto 0;
  text-align: center;
}

.footer_nav {
  position: relative;
  left: 0;
  right: 0;
  padding: 40px 0;
  margin: 0 auto;
}

.footer_nav ul {
  margin: 0 auto;
  overflow: hidden;
  width: 584px;
}

.footer_nav li {
  float: left;
  line-height: 1.6rem;
  border-left: 1px solid #888888;
  margin-left: 20px;
  padding-left: 20px;
}

.footer_nav li:first-child {
  border-left: none;
  margin-left: 0;
  padding-left: 0;
}


.footer_nav li a {
  font-size: 1.6rem;
  display: inline-block;
  color: #444444;
  font-family: 'Lora', serif;
  letter-spacing: 1.5px;
  transition: all  0.3s ease;
}

.footer_nav li a:hover {
  background: rgba(0, 177, 255, 0.25);
  opacity: 0.7;
}


.footer_logo {
  width: 100%;
  text-align: center;
  margin: 20px auto 40px;
}

.footer_logo img {
  width: auto;
}

#footer_wrap .copy {
  color: #444444;
  font-family: 'Lora', serif;
  margin-bottom: 45px;
  font-size: 1.5rem;
  line-height: 1.2;
}

#footer_wrap .copy > span{   /* 文字の折り返し */ 
  font-family: 'Lora', serif;
  display: inline-block;
}

/*TOPへ戻るボタンここから*/
#page_top{
  width: 60px;
  height:60px;
  position: fixed;
  right: 2%;
  bottom: 2%;
  background-color: rgba(0, 177, 255, 0.40);
  opacity: 0.8;
  border-radius: 50%;
}
#page_top a{
  position: relative;
  display: block;
  width: 60px;
  height: 60px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f106';
  font-size: 40px;
  color: #fff;
  position: absolute;
  width: 23px;
  height: 40px;
  top: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
/*TOPへ戻るボタンここまで*/


/*============================
==============================
ここからhair_menu.html
ここからesthe_menu.html
==============================
=============================*/

#menu_top {
  width: 94%;
/*
  background-color: rgba(0, 177, 255, 0.20);
  background-image: url("images/wet-snow.png");
*/
  padding: 2% 0px;
  margin: auto;
/*    margin: 0 calc(50% - 50vw);*/ 
  font-size: 0;
}

#menu_top section {
  display: inline-block;
  width: 65%;
  padding: 0 3% 0 0; 
  vertical-align: top;
}

#menu_top h1 {
  font-size: 2rem;
  line-height: 1.3;
  font-family: 'Lora', serif;
}

#menu_top p {
  font-size: 1.4rem;
  margin: 2% 0 0 0;
  line-height: 1.5;
  text-align: justify;
}

#menu_top .pict_box {
  display: inline-block;
  width: 32%;
}

#menu_top .pict_box img {
  width: 100%;
}

.menu_wrap {
  overflow: hidden;
  margin: 0 3%;
}

.menu_wrap .menu_title {
  width: 100%;
  padding: 1% 0;
  margin: auto;
}

.menu_title h2 {
  font-size: 2.1rem;
  padding: 0;
  font-family: 'Lora', serif;
}

.menu_title p.tax {
/*  display: block;*/
  font-size: 1.4rem;
  padding: 0.7% 0 0;
  font-family: sans-serif;
}

/*ここから後から追加した*/
.menu_wrap .menu_addon01 {
  display: block;
  font-size: 1.4rem;
  line-height: 1.3;
  padding: 3% 0 0;
  font-family: sans-serif;
  text-align: center;
}
/*ここまで後から追加した*/

.primary {
  width: 47%;
  float: left;
}

/* ここからエステメニューをprimaryにまとめた */
.primary.together {
  width: 70%;
  float: none;
  margin: auto;
}

.menu_wrap .menu_addon01.wt01 {
  width: 70%;
  margin: auto;
  text-align: left;
}
/* ここまでエステメニューをprimaryにまとめた */

section.cut, section.color, section.perm, section.straight, 
section.option, section.esthe  {
  padding: 20px 0 50px 0;
}

.menu_wrap h3 {
  font-size: 2rem;
  padding: 7px 0;
  margin-bottom: 7px;
  font-family: 'Lora', serif;
  letter-spacing: 1.5px;
  background-color: rgba(3, 3, 3, 0.15);
  background-image: url("images/wet-snow.png");
}

.menu_wrap span {
  font-size: 1.2rem;
}

.menu_wrap primary p, .menu_wrap secondary p{
  font-size: 1.2rem;
  padding: 8px 0 0;
  margin-bottom: 5px;
  line-height: 1.3;
/*  text-align: left;*/
}

ul.menu_list{
  width: 100%;
  font-size: 1.4rem;
  line-height: 1.7;
/*  text-align: left;*/
  padding: 4% 0 0 0;
}

ul.menu_list dl {
/*
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
*/
  border-bottom: 1px solid #888888;
  padding-bottom: 5%;
  margin-bottom: 5%;
  overflow: hidden;
}

ul.menu_list dt {
  text-align: left;
  float: left;
}

ul.menu_list dd {
  text-align: right;
}

/* メニューの説明文 */
ul.menu_list dd.menu_text{
  text-align: left;
  font-size: 1.2rem;
  padding: 2% 0 0 0;
}

/* メニューからの各ページへのリンク */
ul.menu_list dd.menu_text a {
  color: #444444;
  text-decoration: underline;
}

.secondary {
  width: 47%;
  float: right;
}

.menu_service {
  width: 100%;
  padding: 3%;
  font-size: 1.5rem;
  line-height: 1.5;
  background:rgba(255, 127, 110, 0.1); 
  border: 1px solid #888888;
  text-align: justify;
}

/*============================
==============================
ここからstaff_menu.html
==============================
=============================*/

.staff_swiper {
  max-width: 1060px;
  padding: 30px 0 50px;
  margin: 40px 0 40px;
/*  background: rgba(137, 200, 255, 0.32);*/
}

.swiper_swiper img{
  max-width: 100%;
}

.swiper-slide-content {
  text-align: center;
  color: #444444;
  font-size: 1.3rem;
  padding: 2%;
  background: rgba(232, 232, 232, 0.46);
}


#staff_top {
  width: 94%;
  background-color: rgba(0, 177, 255, 0.20);
  background-image: url("images/wet-snow.png");
  padding: 2% 0;
  margin: 0 auto 3%;;
}

#staff_top section {
/*  display: inline-block;*/
  width: 70%;
  padding: 0; 
/*  vertical-align: top;*/
  margin: auto;
}

#staff_top h1 {
  font-size: 2rem;
  line-height: 1.3;
  font-family: 'Lora', serif;
}

#staff_top p {
  font-size: 1.4rem;
  margin: 2% 0 2%;
  line-height: 1.5;
  text-align: justify;
}

.staff_title {
  max-width: 70%;
  padding: 2% 0; 
  margin: 8% auto 4%;
}

.staff_title h2 {
  font-size: 2.1rem;
  padding: 0;
  font-family: 'Lora', serif;
}

.staff_title p {
  font-size: 1.4rem;
  padding: 2% 0 0;
  font-family: sans-serif;
}

ul.staff_list{
  width: 94%;
  line-height: 1.7;
  padding: 4% 0 0 0;
  margin: 0 auto;
  text-align: left;
}

ul.staff_list li {
  overflow: hidden;
  margin-bottom: 5%;
/*  border-bottom: 1px solid #888888;*/
} 

.staff_inner .staff_pict {
  max-width: 30%;
  float: left;
  padding-right: 3%;
}


.staff_inner .staff_pict img {
  width: 100%;
}

.staff_inner .staff_pict p {
  color: #444444;
  text-align: center;
  text-decoration: underline;
}


/* ここからモーダルウィンドウ　Modaal用 css */
.modaal-overlay {
  z-index: 999999 !important; 
}

.modaal-wrapper {
  z-index: 9999999 !important; 
}

.modaal-container {
  width: 100% !important;
}

.modaal-content-container {
  padding: 10% !important;
/*
  background-color: rgba(0, 177, 255, 0.20);
  background-image: url("images/wet-snow.png");
*/
}

.modaal-content {
  line-height: 1.5;
  margin: auto;
  text-align: center;
}

.modaal-content p {
  font-size: 1.5rem;
/*  text-align: left;*/
  padding-top: 5%;
  font-family: sans-serif;
  text-align: left;
}

.modaal-content h3 {
  font-size: 2.2rem;
  letter-spacing: 2px;
  margin: 4% 0;
  padding: 1%;
/*  border: 1px solid #888;*/
  background: rgb(255, 255, 255, 0.5);
  font-family: 'Lora', serif;
}

.modaal-content img {
  max-width: 100%;
}

/*
.modaal-content ol li{
  list-style-type: decimal;
}

.modaal-content li {
  font-size: 16px;
  text-align: left;
  padding-bottom: 2%;
  margin-left: 4%;
}

.modaal-content  span{
  color: #790000;
}
*/
/* ここまでモーダルウィンドウ　Modaal用 css */


.staff_inner section {
  width:70%;
  overflow: hidden;
}

.staff_inner h3 {
  width: 100%;
/*  background: #eeeeee;*/
  padding: 0 0 2%;
  font-size: 1.4rem;  
}

ul.staff_list dl {
  padding-bottom: 4%;
  font-size: 1.7rem;
  overflow: hidden;
  
}

ul.staff_list dt {
  width: 130px;
  text-align: left;
  float: left;
}

ul.staff_list dd {
  width: auto;
  float: left;
}

/* メニューの説明文 */
ul.staff_list dd.staff_text{
  text-align: left;
  font-size: 1.4rem;
  padding: 2% 0 0 0;
  clear: both;
}


/*============================
==============================
ここからshop.html
==============================
=============================*/

#shop_top {
  width: 94%;
/*
  background-color: rgba(0, 177, 255, 0.20);
  background-image: url("images/wet-snow.png");
*/
  padding: 2% 0;
  margin: 0 auto 3%;;
}


#shop_top section {
/*  display: inline-block;*/
  width: 100%;
  padding: 0; 
/*  vertical-align: top;*/
  margin: auto;
}

#shop_top h1 {
  font-size: 2rem;
  line-height: 1.3;
  font-family: 'Lora', serif;
}

#shop_top p {
  font-size: 1.4rem;
  margin: 1% 0 1%;
  line-height: 1.5;
  text-align: center;
}

.shop_pict_box {
  width: 100%;
  margin: 3% auto 0;
  overflow: hidden;
}

.shop_pict_box li {
  width: 32%;
  float: left;
  margin-right: 2%;
  margin-bottom: 2%;
}

.shop_pict_box li:nth-child(3) {
  margin-right: 0;
}

.shop_pict_box li:nth-child(6) {
  margin-right: 0;
}

.shop_pict_box li img{
  width: 100%;
  float: left;
}

li .shadow:hover {
  opacity: 0.5;
  transition: all  0.3s ease;
}

.shop_title {
  max-width: 70%;
  padding: 2% 0; 
  margin: 8% auto;
}

.shop_title h2 {
  font-size: 2.1rem;
  padding: 0;
  font-family: 'Lora', serif;
}

.shop_title p {
  font-size: 1.4rem;
  padding: 2% 0 0;
  font-family: sans-serif;
}

.shop_inner {
  width: 100%;
  margin-bottom: 50px;
  text-align: center;
  margin: 0 auto;
}

.info_text {
  width: auto;
  margin: 30px 3% 0;
}

.info_text table {
  width: 100%;
  font-size: 1.5rem;
  background: #ffffff;
  line-height:1.3;
}

.info_text tr {
  border-top: 1px dashed #888888;
  border-bottom: 1px dashed #888888;
}

.info_text th {
/*  width: 85px;*/
  padding: 18px 30px;
/*  border: 1px solid #888888;*/
  background-color: rgba(0, 177, 255, 0.20);
  background-image: url("images/wet-snow.png");
  vertical-align: middle;
}

.info_text td {
/*  width: 440px;*/
  padding: 18px 30px;
/*  border: 1px solid #888888;*/
}

.map {
  width: 94%;
  margin: 30px auto;
}

.map_pict {
  width: auto;
  font-size: 0;
  padding: 3% 0;
}

.map_pict .map_near, 
.map_pict .map_far {
  display: inline-block;
}

.map_pict p {
  text-align: center;
  font-size: 1.5rem;
  border: 1px solid #888888;
  padding: 1% 2%;
  margin: 3% 10%;
  color: #444444;
}

.map_pict img {
  width: 70%;
  padding: 3% 0;
}

.map_pict .shadow:hover {
  opacity: 0.8;
}

.gmap{
  height: 0;
  overflow: hidden;
  margin-top: 20px;
  padding-bottom: 56.25%;
  position: relative;
}

.gmap iframe {
  position: absolute;
  left: 0;
  right:0;
  top: 0;
  height: 100%;
  width: 100%;
  margin: auto;
}


/*============================
==============================
ここからbook.html
==============================
=============================*/

#book_top {
  width: 94%;
/*
  background-color: rgba(0, 177, 255, 0.20);
  background-image: url("images/wet-snow.png");
*/
  padding: 2% 0;
  margin: 0 auto;
}


#book_top section {
  width: 100%;
  padding: 0;
  margin: auto;
}

.book_pict {
  width: 100%;
  margin: 0 auto;
  animation-name: swing;
  animation-duration: 3s;
  animation-delay: .45s;
  animation-iteration-count: infinite;
}

@-webkit-keyframes swing {
    0%,100% { 
        -webkit-transform-origin: bottom center; 
    }
    10% { -webkit-transform: rotate(-15deg); }  
    20% { -webkit-transform: rotate(10deg); }
    30% { -webkit-transform: rotate(-5deg); }   
    40% { -webkit-transform: rotate(5deg); }    
    50% { -webkit-transform: rotate(-3deg); }
    60% { -webkit-transform: rotate(2deg); }
    70% { -webkit-transform: rotate(-2deg); }
    80% { -webkit-transform: rotate(1deg); }
    90% { -webkit-transform: rotate(-1deg); }
    100% { -webkit-transform: rotate(0deg); }
}

.book_pict img {
  width: auto;
  margin: 0 auto;
  filter: drop-shadow(2px 2px 3px #444444);
}

.book_title {
  max-width: 94%;
/*  padding: 3% 0; */
  margin: 3% auto;
}

.book_title h1 {
  font-size: 2.0rem;
  line-height: 1.3;
  padding: 0;
  font-family: 'Lora', serif;
}

.book_title p {
  font-size: 1.4rem;
  padding: 1% 0 2%;
  line-height: 1.5;
  font-family: sans-serif;
}

.book_inner {
  width: 100%;
  margin-bottom: 50px;
  text-align: center;
  margin: 0 auto;
}

.book_type {
  width: 94%;
  overflow: hidden;
  margin: 0 auto 10%;
  padding: 3% 0;
}

.book_image {
  width: 24%;
  float: left;
  margin: 0 0 0 6%;
}

.book_image img{
  width: 100%;
}

.book_content {
  width: 58%;
  float: left;
  margin: 0 6% 0;
  text-align: left;
}

.book_content h2 {
  font-size: 2.2rem;
  line-height: 1.3;
}

.book_content p {
  font-size: 1.5rem;
  line-height: 1.5;
  padding: 3% 0;
}

.book_content p.book_text {
  line-height: 1.5;
  text-align: justify;
}

.book_banner {
  margin: auto;
}

.book_banner p {
  display: inline-block;
  font-size: 1.4rem;
  color: #444444;
  padding: 3% 0;
  text-decoration: underline;
}

.book_banner span {
  text-decoration: underline;
}

.book_profile {
  width: 83%;
  margin: auto;
}

.book_profile h3 {
  font-size: 1.8rem;
  line-height: 1.3;
  padding-bottom: 1%;
}

.book_profile p {
  font-size: 1.5rem;
  line-height: 1.5;
  padding: 3% 5%;
  text-align: justify;
  border: 1px dashed #888888;
}

/*============================
==============================
ここからcovid-19-measures.html
==============================
=============================*/

#covid_info {
  width: 94%;
  padding: 2% 0px;
  margin: auto;
}

#covid_info > section {
  width: 70%;
  margin: auto;
}

#covid_info h1 {
  font-size: 2rem;
  line-height: 1.3;
  background-color: rgba(0, 177, 255, 0.20);
  background-image: url("images/wet-snow.png");
  padding: 2% 0;
  margin: 0 auto 6%;
  border-top: 1px solid #888888;
  border-bottom: 1px solid #888888;
  font-family: 'Lora', serif;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

#covid_info p {
  font-size: 1.5rem;
  margin: 2% 0 0 0;
  line-height: 1.5;
  text-align: justify;
}

#covid_info h2 {
  font-size: 1.6rem;
  margin: 3% 0;
  line-height: 1.5;
  background-color: rgba(0, 177, 255, 0.20);
  background-image: url("images/wet-snow.png");
  text-align: center;
  padding: 2% 3%;
}

#covid_info ol {
  padding: 2% 0;
  list-style-type: decimal;
}

#covid_info li {
  font-size: 1.5rem;
  text-align: left;
  padding: 2% 0;
  margin: 0 0 0 5%;
  line-height: 1.5;
  letter-spacing: 1px;
}

#covid_info .measures_pixt {
  width: 100%;
  
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display: flex;
  
  -webkit-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
  flex-wrap: wrap;
  
  -webkit-box-pack:justify;
  -webkit-justify-content:space-between;
  -ms-flex-pack:justify;
  justify-content: space-between;
  
  margin: 2% 0;
}

#covid_info .measures_pixt .covid_pict{
  width: 32%;
  margin: 2% 0 0 0;
}

#covid_info .measures_pixt p img{
  width: 100%;
}

/*============================
==============================
ここからnews.html
==============================
=============================*/

#news_info {
  width: 94%;
  padding: 2% 0px;
  margin: auto;
}

#news_info > section {
  width: 74%;
  margin: auto;
}

#news_info h1 {
  font-size: 2rem;
  line-height: 1.3;
  background-color: rgba(0, 177, 255, 0.20);
  background-image: url("images/wet-snow.png");
  padding: 2% 0;
  margin: 0 auto 4%;
  border-top: 1px solid #888888;
  border-bottom: 1px solid #888888;
  font-family: 'Lora', serif;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

#news_info p {
  font-size: 1.8rem;
  line-height: 1.5;
  text-align: center;
}

#news_info h2 {
  font-size: 1.6rem;
  margin: 3% 0;
  line-height: 1.5;
  text-align: center;
  padding: 0% 3%;
}

#news_info dl {
  width: 100%;
  border-bottom: 1px dashed #888888;
  font-size: 1.5rem;
  letter-spacing: 1px;
  text-align: left;
  line-height: 1.5;
}

#news_info dt {
  width: 40%;
  float: left;
  clear: left;
  border-top: 1px dashed #888888;
  text-align: center;
  padding: 2%;
}

#news_info dd {
  margin-left: 40%;
  border-top: 1px dashed #888888;
  padding: 2%;
}

#news_info dd .mb01 {
 margin-bottom: 10px;
  display: block;
}


/*============================
==============================
ここからvillalodola_color.html
==============================
=============================*/

#villa_top {
  width: 100%;
  background-color: rgba(167, 255, 0, 0.1);
  background-image: url("images/wet-snow.png");
  padding: 4% 0px;
  margin: 0 auto 3%;
/*  margin: 0 calc(50% - 50vw); */
}

#villa_top section  {
  width: 65%;
  padding: 0; 
  margin: auto;
}

#villa_top h1 {
  font-size: 2.1rem;
  line-height: 1.3;
  font-family: 'Lora', serif;
  padding: 3%;
  background: rgb(255, 255, 255);
  box-shadow: 0 0 2px 1px #888888;
}

#villa_top p {
  font-size: 1.5rem;
  margin: 4% 0;
  line-height: 1.5;
  text-align: justify;
}

#villa_top .pict_box {
  width: 26%;
  margin: 3% auto 1%;
}

#villa_top .pict_box img {
  width: 100%;
}

.villa_wrap {
  width: 100%;
  margin: auto;
}

.villa_wrap .villa_title {
  width: 100%;
  padding: 2% 0;
  margin: auto;
  background: #eeeeee;
}

.villa_wrap .villa_title p {
  font-size: 2rem;
  padding: 1% 0;
  font-family: 'Lora', serif;
}

.villa_wrap .villa_title h2 {
  font-size: 2.1rem;
  padding: 2% 0;
  font-family: 'Lora', serif;
  border-top: 1px solid #888888;
  border-bottom: 1px solid #888888;
  background: white;
}

.villa_wrap .villa_ds {
  width: 94%;
  padding: 2% 0px;
  margin: auto;
  font-size: 0;
}

.villa_wrap .villa_ds_text01 {
  display: inline-block;
  width: 65%;
  margin: 0 3% 0 0;
/*  padding: 0 3% 0 0;*/
  /*内側のpaddingの横幅が効かない為margin使用*/
  vertical-align: top;
}

.villa_wrap .villa_ds_text02 {
  display: inline-block;
  width: 65%;
  margin: 0 0 0 3%;
/*  padding: 0 3% 0 0;*/
  /*内側のpaddingの横幅が効かない為margin使用*/
  vertical-align: top;
}

.villa_wrap .villa_ds p{
  font-size: 1.5rem;
  margin: 2% 0 0 0;
  line-height: 1.5;
  text-align: justify;
}

.villa_wrap .villa_ds ol {
  list-style-type: decimal;
  list-style-position: outside;
  text-align: left;
  padding: 0 0 0 6%; 
}

.villa_wrap .villa_ds ol li{
  line-height: 1.5;
  padding: 0 0 3% 0;
  font-size: 1.5rem;
}

.villa_wrap .pict_box {
  display: inline-block;
  width: 32%;
}

.villa_wrap .pict_box img {
  width: 100%;
}

.villa_wrap .villa_inner {
  width: 94%;
  margin: 0 auto;
}

.villa_list section {
  margin: 5% 0;
}

.villa_list .villa_plant h3,
.villa_list .iaca h3 {
  font-size: 2.0rem;
  padding: 1%;
  margin: 0 0 2% 0;
  background: rgba(118, 126, 26, 0.09);
  font-family: 'Lora', serif;
  text-align: left;
  color: rgb(118, 126, 26);
  text-align: center;
  line-height: 1.3
}

.villa_list .villa_plant ul {
  width: 100%;
  text-align: left;
}

.villa_list .villa_plant li {
  display: table;
  padding: 2% 0;
  border-bottom: 1px dashed #cccccc;
}

.villa_list .villa_plant li figure {
  display: table-cell;
  width: 35%;
  padding: 0 0 0 3%;
/*  vertical-align: middle;*/
}

.villa_list .villa_plant li figure img {
  width: 100%;
  height: auto;
}

.villa_list .villa_plant dl {
  display: table-cell;
  vertical-align: middle;
}

.villa_list .villa_plant dt strong {
  font-size: 1.3rem;
  line-height: 1.3;
  display: block;
}

.villa_list .villa_plant dt p {
  font-size: 1.7rem;
  line-height: 1.4;
  font-family: serif;
}

.villa_list .villa_plant dt p sup{
  font-size: 1.1rem;
}

.villa_list .villa_plant dt span {
  font-size: 1.5rem;
  line-height: 1.4;
  display: block;
}

.villa_list .villa_plant li dd {
  font-size: 1.4rem;
  line-height: 1.4;
  padding: 1% 0 0;
}

.villa_list .villa_plant > p {
  text-align: right;
  padding-top: 1%;
  font-size: 80%;
}

.villa_list .iaca .icea_part {
  display: table;
  padding: 2% 0;
  width: 100%;
  text-align: left;
}

.villa_list .iaca .icea_part figure{
  display: table-cell;
  width: 35%;
  padding: 0 0 0 3%;
}

.villa_list .iaca .icea_part figure img {
  width: 100%;
  height: auto;
}

.villa_list .iaca .icea_part dl{
  display: table-cell;
  vertical-align: middle;
}

.villa_list .iaca .icea_part dt{
  font-size: 1.4rem;
  line-height: 1.4;
  padding: 0 0 2%;
}

.villa_list .iaca .icea_part dd{
  font-size: 1.4rem;
  line-height: 1.4;
  padding: 0 0 1%;
}

.villa_list .villa_type {
  background: #f4f4f4;
  padding: 2%;
}

.villa_list .villa_type ul {
  width: 100%;
  text-align: left;
  overflow: hidden;
}

.villa_list .villa_type li {
  width: 48%;
  float: left;
  display: table;
  padding: 2% 0;
  border-bottom: 1px dashed #cccccc;
}

.villa_list .villa_type li:nth-child(2n+1) {
  margin-right: 4%;
}

/* ここから文字の色味のみ */

.villa_list .villa_type li:nth-child(1) dt {
  color: #792700;
}

.villa_list .villa_type li:nth-child(2) dt {
  color: #25616A;
}

.villa_list .villa_type li:nth-child(3) dt {
  color: #825301;
}

.villa_list .villa_type li:nth-child(4) dt {
  color: #73805F;
}

.villa_list .villa_type li:nth-child(5) dt {
  color: #9B6A39;
}

.villa_list .villa_type li:nth-child(6) dt {
  color: #CC9735;
}

.villa_list .villa_type li:nth-child(7) dt {
  color: #494947;
}

.villa_list .villa_type li:nth-child(8) dt {
  color: #B64835;
}

.villa_list .villa_type li:nth-child(9) dt {
  color: #A0A3B5;
}

.villa_list .villa_type li:nth-child(10) dt {
  color: #8E3047;
}

/* ここまで文字の色味のみ */

.villa_list .villa_type li figure {
  display: table-cell;
  width: 20%;
  padding: 0 3% 0 0;
  vertical-align: middle;
}

.villa_list .villa_type li figure img {
  width: 100%;
  height: auto;
}

.villa_list .villa_type dl {
  display: table-cell;
  vertical-align: middle;
}

.villa_list .villa_type dt strong {
  font-size: 1.3rem;
  line-height: 1.3;
  display: block;
}

.villa_list .villa_type dt p {
  font-size: 1.9rem;
  line-height: 1.4;
  font-family: serif;
}

.villa_list .villa_type dt span {
  font-size: 1.5rem;
  line-height: 1.4;
  display: block;
}

.villa_list .villa_type li dd {
  font-size: 1.4rem;
  line-height: 1.4;
  padding: 1% 0 0;
}




/*============================
==============================
ここからproduct.html
==============================
=============================*/


#products_slider {
  margin: 5% auto;
/*  background: #eeeeee;*/
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

#products_slider .box {
  max-width: 1060px;
  width: 100%;
  position: relative;
  height: 30vw;
  max-height: 300px;
  margin: auto;
  overflow: hidden;
}

/* --- 背景の指定 ------------------------------------------- */
.box .bg_img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity:0;
  animation: bgAnime 10s infinite;
  /* 2画像 × 各5s = 10s */
}

/* --- 段差で画像のアニメーションを実行 ----------------- */
.box .src1 {
  background: url("images/products/products01.jpg") no-repeat center bottom/cover;
  animation-delay  : 0s;/* すぐスタート */
}

.box .src2 {
  background: url("images/products/products02.jpg") no-repeat center center/cover; 
  animation-delay  : 5s;/* 5秒遅れてスタート */
}

@keyframes bgAnime {
   0% { opacity: 0; }
   10% { opacity: 1; }
  25% { opacity: 1; }
  35% { opacity: 1; }
 100% { opacity: 0; }
}

/* --- 前面の文字定義 ----- */
.box .box_string {
  position: absolute;
  display: inline-block;
  padding: 1.5rem 1.5rem;
  background: rgba(0, 0, 0, 0.5);
  bottom: 10%;         
  left: 0%;
  font-size: 3rem;
  color: #ffffff;
}

#products_top {
  width: 94%;
  padding: 2% 0px 5%;
  margin: auto;
  font-size: 0;
}

#products_top section {
  width: 65%;
  padding: 0 3% 0 0; 
  vertical-align: top;
  margin: auto;
}

#products_top h2 {
  font-size: 2.3rem;
  line-height: 1.3;
  font-family:'Sawarabi Mincho', serif;
}

#products_top p {
  font-size: 1.5rem;
  margin: 4% 0 0 0;
  line-height: 1.6;
  text-align: justify;
}

.pds_list {
  width: 94%;
  margin: 0 auto;
}

li.pds_bt01 {
  max-width: 22%;
  margin: 4% 4% 0 0;
  float: left;
  text-align: center;
  overflow: hidden;
/*  box-shadow: 0 0 2px rgba(0, 177, 255, 1);*/
}

li.pds_bt01:nth-child(4n)  {
  margin: 4% 0 0 0;
}

li.pds_bt01 a.pds_pict{
  display: inline-block;
  width: 80%;
  transition: all 0.3s linear;
}

li.pds_bt01 a.pds_pict:hover {
  opacity: 0.7;
}

.pds_pict img {
  width: 100%;
}

.pds_name {
  display: inline-block;
  width: 100%;
  height: 100px;
  margin: 10% 0;
  color: #555555;
  transition: all 0.3s linear;
}

.pds_name:hover {
  color: #888888;
}

.pds_name h3 {
  font-size: 1.5rem;
  line-height: 1.3;
  color: rgb(141, 108, 2);
  height: 40%;
  font-weight: bold;
  text-shadow: 0 0 0px rgba(136, 136, 136, 0.5);
}

.pds_name h3 .wb01 {
  font-weight: bold;
  text-shadow: 0 0 0px rgba(136, 136, 136, 0.5);
}

.pds_name p {
  padding: 3% 0 0 0;
  font-size: 1.3rem;
  line-height: 1.3;
  width: 90%;
  margin: auto;
/*  text-align: left;*/
}

.pds_name h3:after {
  font-family: 'icoarrow';
  content: "\e901";
  font-size: 80%;
  position: relative;
  top: 0px;
  left: 3px;
}


/*============================
==============================
ここからitem_01.html
==============================
=============================*/


#item_01_top {
/*  width: 100%;*/
  padding: 3% 0;
  margin: 5% auto;
  font-size: 0;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

#item_01_top section {
  width: 65%;
  padding: 0; 
  vertical-align: top;
  margin: auto;
}

#item_01_top h1 {
  font-size: 2.3rem;
  line-height: 1.3;
  font-family:'Sawarabi Mincho', serif;
}

#item_01_top p {
  font-size: 1.6rem;
  margin: 1% 0 0 0;
  line-height: 1.6;
}

#item_01_top h2 {
  font-size: 1.5rem;
  padding: 1% 0;
  margin: 0;
  line-height: 1.6;
  background: #eeeeee;
}


.item_list {
  width: 94%;
  height: 100%;
  margin: 0 auto;
}


.item_box01 {
  max-width: 48%;
  margin: 5% 4% 5% 0;
  float: left;
  height: 100%;
  text-align: center;
  overflow: hidden;
/*  box-shadow: 0 0 2px rgba(0, 177, 255, 1);*/
}

.item_box01:nth-child(2n)  {
  margin: 5% 0 5% 0;
}

.item_box01 .item_pict{
  display: inline-block;
  width: 55%;
  padding:2%;
  border: 1px solid #cccccc;
}

.item_box01 .item_pict img {
  width: 100%;
}

.item_box01 .item_name {
  width: 100%;
  height: 100%;
  padding: 5% 0 2%;
}

.item_box01 .item_name span  {
  padding: 0 0 2% 0;
  font-size: 1.6rem;
  line-height: 1.3;
  display: block;
  color: rgb(141, 108, 2);
  font-weight: bold;
  text-shadow: 0 0 0px rgba(136, 136, 136, 0.5);
}

.item_box01 .item_name h3 {
  font-size: 1.6rem;
  line-height: 1.3;
  padding: 1% 0;
  color: #ffffff;
  font-weight: bold;
  background: rgba(141, 108, 2, 0.6);
}

.item_box01 .item_name p  {
  padding: 3%;
  font-size: 1.4rem;
  line-height: 1.5;
  width: 100%;
  margin: auto;
  text-align: left;
}

.item_box01 .item_name p.item_text01 {
  background: rgba(226, 226, 226, 0.47);
}

.item_box01 .item_price p{
  padding: 0 3%;
  font-size: 1.4rem;
  line-height: 1.5;
  text-align: left;
}

#item_link01,
#item_link02,
#item_link03,
#item_link04,
#item_link05{
}


/*============================
==============================
ここからmashur.html
==============================
=============================*/

#mashur_top {
  width: 100%;
  padding: 4% 0 2%;
  margin: 0 auto 3%;
/*  margin: 0 calc(50% - 50vw); */
}

#mashur_top section {
  width: 94%;
  padding: 0; 
  margin: auto;
  font-size: 0;
}

#mashur_top h1 {
  font-size: 3.6rem;
  line-height: 1.0;
  font-family: 'Lora', serif;
  padding: 3% 0;
  text-shadow: 0 0 5px #888888;
  margin: 0 calc(50% - 50vw);
}

#mashur_top h1 span.wb01 {
  font-family: serif;
  font-size: 2.9rem;
}

#mashur_top h2 {
  font-size: 2.4rem;
  line-height: 1.3;
  font-family: serif;
  padding: 3% 0; 
}

#mashur_top h2 span.wb01{
  font-family: serif;
  font-size: 2.4rem;
}

#mashur_top p {
  display: inline-block;
  font-size: 1.5rem;
  margin: 3% 0;
  line-height: 1.5;
  width: 62%;
  text-align: justify;
  vertical-align: top;
}

#mashur_top .pict_box {
  position: relative;
  display: inline-block;
  width: 35%;
  margin: 3% 3% 3% 0;
}

#mashur_top .pict_box span {
  font-size: 1.8rem;
  position: absolute;
  left: 5%;
  bottom: 5%;
  text-align: left;
  color: #ffffff;
}

#mashur_top .pict_box img {
  width: 100%;
}

.mashur_wrap {
  width: 100%;
  margin: auto;
}

.mashur_wrap .mashur_title {
  width: 100%;
  padding: 1% 0;
  margin: auto;
/*  background: #eeeeee;*/
}

.mashur_wrap .mashur_title p {
  font-size: 1.9rem;
  padding: 1% 0;
  font-family: 'Lora', serif;
  margin: 0 calc( 50% - 50vw );
}

.mashur_wrap .mashur_title h2 {
  font-size: 2.1rem;
  padding: 2% 0;
  font-family: 'Lora', serif;
/*  border-top: 1px solid #888888;*/
/*  border-bottom: 1px solid #888888;*/
}

.mashur_wrap .mashur_dc {
  width: 94%;
  padding: 2% 0 7%;
  margin: auto;
  font-size: 0;
}

.mashur_wrap .mashur_dc_text01 {
  display: inline-block;
  width: 50%;
  margin: 2% 3% 0 0;
/*  padding: 0 3% 0 0;*/
  /*内側のpaddingの横幅が効かない為margin使用*/
  vertical-align: top;
}

.mashur_wrap .mashur_dc p{
  font-size: 1.5rem;
  margin: 2% 0 0 0;
  line-height: 1.5;
  text-align: justify;
}

.mashur_wrap .pict_box {
  display: inline-block;
  width: 47%;
  overflow: hidden;
}

.mashur_wrap .pict_box figure {
  display: inline-block;
  vertical-align: middle;
  width: 42%;
}

.mashur_wrap .pict_box  figure img {
  width: 100%;
}

.mashur_wrap .pict_box figcaption {
  font-size: 1.5rem;
  padding: 5% 0 0 0;
}

.mashur_wrap .pict_box span{
  display: inline-block;
  vertical-align: middle;
  font-size: 3rem;
  padding: 0 0 0 5%;
}

.mashur_wrap .pict_box02 {
  display: inline-block;
  width: 47%;
  margin-right: 6%;
  overflow: hidden;
}

.mashur_wrap .pict_box02:last-child {
  margin-right: 0%;
}

.mashur_wrap .pict_box02 figure {
  display: inline-block;
  vertical-align: middle;
  width: 42%;
}

.mashur_wrap .pict_box02  figure img {
  width: 100%;
  border-radius: 15px;
}

.mashur_wrap .pict_box02 figcaption {
  font-size: 1.5rem;
  margin: 7% 0 0 0;
  padding: 3% 0 ;
  background: rgba(238, 238, 238, 0.72);
  border-radius: 10px;
}

.mashur_wrap .pict_box02 span{
  display: inline-block;
  vertical-align: middle;
  font-size: 3rem;
  padding: 0 2% 0 3%;
}

.mashur_wrap .mashur_dc_text02 {
  display: inline-block;
  width: 46%;
  margin: 2% 6% 0 0;
  /*内側のpaddingの横幅が効かない為margin使用*/
  vertical-align: top;
}

.mashur_wrap .mashur_dc_text02:last-child {
  margin: 2% 0 0 0;
}

.mashur_wrap .mashur_dc h3 {
  font-size: 1.9rem;
  padding: 2%;
  margin: 0 0 5%;
  border-bottom: 1px dashed #888888;
}

.mashur_wrap .mashur_dc ol {
  list-style-type: square;
  list-style-position: outside;
  text-align: left;
  padding: 0 0 0 7%; 
}

.mashur_wrap .mashur_dc ol li{
  line-height: 1.5;
  padding: 0 0 5% 0;
  font-size: 1.5rem;
}

.mashur_inner .mashur_pict{
  width: 94%;
  font-size:0;
  margin: auto;
}

.mashur_inner .mashur_pict figure {
  display: inline-block;
  vertical-align: middle;
  width: 25%;
  margin: 0 3% 12% 0;
}

.mashur_inner .mashur_pict figure:last-child {
  margin: 0 0 12% 0;
}

.mashur_inner .mashur_pict figure img {
  width: 100%;
  border-radius: 10px;
}

.mashur_inner .mashur_pict figure figcaption {
  font-size: 1.5rem;
  margin: 7% 0 0 0;
  padding: 3% 0 ;
  background: rgba(238, 238, 238, 0.72);
  border-radius: 10px;
}


/*============================
==============================
ここからkoso.html
==============================
=============================*/



#koso_top {
  width: 100%;
  padding: 4% 0 2%;
  margin: 0 auto 3%;
}

#koso_top article  {
  width: 94%;
  padding: 0; 
  margin: auto;
  font-size: 0;
}

#koso_top h1 {
  font-size: 3.6rem;
  line-height: 1.0;
  font-family: 'Lora', serif;
  padding: 3% 0;
  text-shadow: 0 0 5px #ffffff;
  margin: 0 calc(50% - 50vw);
  background: rgb(235, 248, 188);
  background-image: url("images/fresh-snow.png")
}

#koso_top h1 span.wb01 {
  font-family: 'Lora', serif;
  font-size: 2.9rem;
}

#koso_top p {
  font-size: 2.4rem;
  line-height: 1.3;
  font-family: serif;
  padding: 3% 0; 
}


#koso_top p span.wb01{
  font-family: serif;
  font-size: 2.4rem;
}

#koso_top .koso_t_primary {
  display: inline-block;
  width: 38%;
  margin: 3% 3% 3% 0;
}

#koso_top .koso_t_primary h2 {
  font-size: 1.5rem;
  margin: 3% 15%;
  padding: 1% 0;
  color: #444444;
  display: block;
  border: 1px solid #888888;
  line-height: 1.3;
}

#koso_top .pict_box img {
  width: 100%;
  padding: 0 15%; 
}

#koso_top .koso_t_secondary{
  display: inline-block;
  font-size: 1.5rem;
  margin: 3% 0;
  line-height: 1.5;
  width: 59%;
  text-align: justify;
  vertical-align: top;
}

#koso_top .koso_t_secondary h3{
  font-size: 1.6rem;
  line-height: 1.5;
  font-family: sans-serif;
}

#koso_top .koso_t_secondary p{
  font-size: 1.5rem;
  line-height: 1.5;
  font-family: sans-serif;
  padding: 2% 0 0;
}

#koso_top .koso_t_secondary ol{
  list-style-type: decimal;
  padding: 2% 0 2% 25px;
}


.koso_wrap {
  width: 100%;
  margin: auto;
}

.koso_wrap .koso_title {
  width: 100%;
  padding: 1% 0;
  margin: auto;
}

.koso_wrap .koso_title p {
  font-size: 1.9rem;
  padding: 1% 0;
  font-family: 'Lora', serif;
  margin: 0 calc( 50% - 50vw );
}

.koso_wrap .koso_title h2 {
  font-size: 2.1rem;
  padding: 2% 0;
  font-family: 'Lora', serif;
/*  border-top: 1px solid #888888;*/
/*  border-bottom: 1px solid #888888;*/
}

.koso_wrap .koso_title h2 span {
  font-family: 'Lora', serif;
}

.koso_wrap .koso_dc {
  width: 94%;
  padding: 2% 0 7%;
  margin: auto;
  font-size: 0;
}

.koso_wrap .koso_dc_text01 {
  display: inline-block;
  width: 50%;
  margin: 0% 3% 0 0;
/*  padding: 0 3% 0 0;*/
  /*内側のpaddingの横幅が効かない為margin使用*/
  vertical-align: top;
}

.koso_wrap .koso_dc p{
  font-size: 1.5rem;
  margin: 2% 0 0 0;
  line-height: 1.5;
  text-align: justify;
}

.koso_wrap .pict_box {
  display: inline-block;
  width: 47%;
  overflow: hidden;
}

.koso_wrap .pict_box figure {
  display: inline-block;
  vertical-align: middle;
  width: 47%;
  margin: 0% 2% 2% 2%;
  padding: 3%;
  background: rgb(235, 248, 188);
  background-image: url("images/fresh-snow.png")
}

.koso_wrap .pict_box figure:nth-child(2n) {
  margin: 0% 2% 2% 0;
}

.koso_wrap .pict_box figure img {
  width: 100%;
}

.koso_wrap .pict_box figcaption {
  font-size: 1.5rem;
  padding: 7% 0 0;
}


.koso_wrap .pict_box02 {
  width: 100%;
  margin-right: 4%;
}


.koso_wrap .pict_box02 figure {
  display: inline-block;
  vertical-align: middle;
  width: 42%;
  margin-right: 4%;
  overflow: hidden;
  vertical-align: top;
}

.koso_wrap .pict_box02 figure:last-child {
  margin-right: 0%;
   width: 54%;
}

.koso_wrap .pict_box02  figure img {
  width: 100%;
  border-radius: 15px;
}

.koso_wrap .pict_box02 figcaption {
  font-size: 1.5rem;
  margin: 7% 0 0 0;
  padding: 3% 0 ;
  background: rgba(238, 238, 238, 0.72);
  border-radius: 10px;
}

.koso_wrap .koso_dc_text02 {
  display: inline-block;
  width: 80%;
  margin: 2% 6% 0 0;
  /*内側のpaddingの横幅が効かない為margin使用*/
  vertical-align: top;
}

.koso_wrap .koso_dc_text02:last-child {
  margin: 2% 0 0 0;
}

.koso_wrap .koso_dc h3 {
  font-size: 1.9rem;
  padding: 2%;
  margin: 0 0 5%;
  border-bottom: 1px dashed #888888;
}

.koso_wrap .koso_dc ol {
  list-style-type: square;
  list-style-position: outside;
  text-align: left;
  padding: 0 0 0 7%; 
}

.koso_wrap .koso_dc ol li{
  line-height: 1.5;
  padding: 0 0 5% 0;
  font-size: 1.5rem;
}


/*============================
==============================
ここからtreatment.html
==============================
=============================*/

#treat_top {
  width: 100%;
  padding: 4% 0 2%;
  margin: 0 auto 3%;
}

#treat_top article  {
  width: 94%;
  padding: 0; 
  margin: auto;
  font-size: 0;
}

#treat_top h1 {
  font-size: 3.6rem;
  line-height: 1.0;
  font-family: 'Lora', serif;
  padding: 3% 0;
  text-shadow: 0 0 5px #ffffff;
  margin: 0 calc(50% - 50vw);
  background: rgb(248, 239, 188);
  background-image: url("images/fresh-snow.png")
}

#treat_top p {
  font-size: 2.4rem;
  line-height: 1.3;
  font-family: serif;
  padding: 3% 0; 
}


#treat_top p span.wb01{
  font-family: serif;
  font-size: 2.4rem;
}

#treat_top .treat_t_primary {
  display: inline-block;
  width: 42%;
  margin: 3% 3% 3% 0;
}

#treat_top .treat_t_primary h2 {
  font-size: 1.5rem;
  margin: 3% 15%;
  padding: 1% 0;
  color: #444444;
  display: block;
  border: 1px solid #888888;
  line-height: 1.3;
}

#treat_top .pict_box img {
  width: 100%;
  padding: 0 15%; 
}

#treat_top .treat_t_secondary{
  display: inline-block;
  font-size: 1.5rem;
  margin: 3% 0;
  line-height: 1.5;
  width: 55%;
  text-align: justify;
  vertical-align: top;
}

#treat_top .treat_t_secondary h3{
  font-size: 1.6rem;
  line-height: 1.5;
  font-family: sans-serif;
}

#treat_top .treat_t_secondary p{
  font-size: 1.5rem;
  line-height: 1.5;
  font-family: sans-serif;
  padding: 2% 0 0;
}

#treat_top .treat_t_secondary p:last-child{
  padding: 1% 0 3%;
  font-size: 90%;
}

#treat_top .treat_t_secondary ol{
  list-style-type: none;
  padding: 2% 0;
}

#treat_top .treat_t_secondary ol li{
  margin: 0 0 2%;
  padding: 1% 3%;
  background: #eeeeee;
}

.treat_wrap {
  width: 100%;
  margin: auto;
}

.treat_wrap .treat_title {
  width: 100%;
  padding: 1% 0;
  margin: auto;
}

.treat_wrap .treat_title p {
  font-size: 1.9rem;
  padding: 1% 0;
  font-family: 'Lora', serif;
  margin: 0 calc( 50% - 50vw );
}

.treat_wrap .treat_title h2 {
  font-size: 2.1rem;
  padding: 2% 0;
  font-family: 'Lora', serif;
/*  border-top: 1px solid #888888;*/
/*  border-bottom: 1px solid #888888;*/
}

.treat_wrap .treat_title h2 span {
  font-family: 'Lora', serif;
}

.treat_wrap .treat_dc {
  width: 94%;
  padding: 2% 0 7%;
  margin: auto;
  font-size: 0;
}

.treat_wrap .treat_dc_text01 {
  width: 55%;
  margin: 0 auto 3%;
  vertical-align: top;
}

.treat_wrap .treat_dc p{
  font-size: 1.5rem;
  line-height: 1.5;
  text-align: justify;
}

.treat_wrap .pict_box {
  width: 100%;
  padding: 3% 0;
  overflow: hidden;
}

.treat_wrap .pict_box figure {
  display: inline-block;
  vertical-align: middle;
  width: 30%;
  margin: 0 0 0 3%;
  padding: 2%;
  box-shadow: 0 0 2px 1px #ffffff;
  transition: 0.5s ;
}

.treat_wrap .pict_box figure:nth-child(1) {
  margin: 0 3% 0 0;
}

.treat_wrap .pict_box figure:hover {
  opacity: 0.8;
  background: #eeeeee;
}

.treat_wrap .pict_box span {
  display: inline-block;
  vertical-align: middle;
  font-size: 3rem;
}

.treat_wrap .pict_box figure img {
  width: 100%;
}

.treat_wrap .pict_box figcaption {
  font-size: 2rem;
  padding: 7% 0 0;
  font-family: 'Lora', serif;
  letter-spacing: 1.5px;
}


.treat_wrap .treat_bt figure {
  display: inline-block;
  vertical-align: middle;
  width: 42%;
  margin: 0% 3% 3% 0;
  overflow: hidden;
  vertical-align: top;
}

.treat_wrap figure img {
  width: 100%;
  border-radius: 15px;
}

.treat_bt figcaption {
  font-size: 1.5rem;
  margin: 7% 0 0 0;
  padding: 3% 3%;
  background: rgba(238, 238, 238, 0.72);
  border-radius: 10px;
  line-height: 1.5;
}

.treat_bt section {
  display: inline-block;
  vertical-align: middle;
  width: 55%;
  text-align: justify;
  font-size: 1.5rem; 
  line-height: 1.5;
}

.treat_bt section h3{
  font-size: 1.6rem;
  line-height: 1.5;
  font-family: sans-serif;
}

.treat_bt ol{
  list-style-type: none;
  padding: 2% 0;
}

.treat_bt ol li{
  margin: 0 0 2%;
  padding: 1% 3%;
  background: #eeeeee;
}

.treat_dc .treat_bt section p{
  font-size: 90%;
}

.treat_bt .price_box {
  margin: 5% 0 0 0;
  font-size: 1.6rem;
  width: 100%;
}

.treat_bt .price_box h3 {
  padding: 1%;
  text-align: center;
  margin: 2% 0;
}

.treat_bt .price_box dl {
  width: 100%;
  overflow: hidden;
  text-align: center;
}

.treat_bt .price_box dt {
  width: 100%;
  padding: 1% 0 2%;
  line-height: 1.2;
}

.treat_bt .price_box dt span ,
.treat_bt .price_box h3 span{
  font-size: 90%;
}


.treat_bt .price_box dd {
  border-top: 1px dotted #999999;
  padding: 2% 0%;
  width: 100%;
  text-align: right;
}

.treat_bt .price_box dd span{
  display: block;
  padding: 2% 5%;
  background: #f7f5f5;
}


/*============================
==============================
ここからmiraclebody.html
ここからhokkoribody.html
==============================
=============================*/


#m_body_top {
  width: 100%;
  padding: 4% 0 2%;
  margin: 0 auto 3%;
/*  margin: 0 calc(50% - 50vw); */
}

#m_body_top article {
  width: 94%;
  padding: 0; 
  margin: auto;
  font-size: 0;
}

#m_body_top h1 {
  font-size: 3.6rem;
  line-height: 1.0;
  font-family: 'Lora', serif;
  padding: 3% 0;
  text-shadow: 0 0 5px #888888;
  margin: 0 calc(50% - 50vw);
}

#m_body_top h1 span.wb01 {
  font-family: serif;
  font-size: 2.9rem;
}

#m_body_top h2 {
  font-size: 2.4rem;
  line-height: 1.3;
  font-family: serif;
  padding: 3% 0; 
}

#m_body_top h2 span.wb01{
  font-family: serif;
  font-size: 2.4rem;
}

/* ここからmiraclebody.htmlの背景画像 */
#m_body_top .pict_box01 {
  position: relative;
  top: 0;
  left: 0;
  width: 100vw;
  height: 40vh;
  margin: 0 calc(50% - 50vw);
  background: url("images/miraclebody/m_body_01.jpg")center center / cover no-repeat;
}
/* ここまでmiraclebody.htmlの背景画像 */

/* ここからhokkoribody.htmlの背景画像 */
#m_body_top .pict_box02 {
  position: relative;
  top: 0;
  left: 0;
  width: 100vw;
  height: 40vh;
  margin: 0 calc(50% - 50vw);
  background: url("images/hokkoribody/h_body_01.jpg")center center / cover no-repeat;
}
/* ここまでhokkoribody.htmlの背景画像 */

#m_body_top .pict_box01 span, #m_body_top .pict_box02 span {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  -ms-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  margin: auto;
  font-size: 3.5rem;
  font-family: 'Lora', serif;
  color: #ffffff;
  filter: drop-shadow(0px 0px 2px #888888);
}

#m_body_top .m_body_outline{
  width: 100%;
  margin: 5% 5% 0 0;
  overflow: hidden;
}

.m_body_outline section {
  width: 60%;
  margin: 0 5% 0 0;
  float: left;
}

.m_body_outline section h3 {
  font-size: 2rem;
  padding: 0;
  margin: 0 0 2% 0;
  line-height: 1.5;
}

.m_body_outline section p {
  font-size: 1.5rem;
  margin: 0 0 2%;
  line-height: 1.5;
  width: 100%;
  text-align: justify;
}

.m_body_outline img {
  margin: 0 0 0 0;
  width: 35%;
}

.m_body_wrap {
  width: 100%;
  margin: auto;
}

.m_body_wrap .m_body_title {
  width: 100%;
  padding: 1% 0;
  margin: auto;
}

.m_body_wrap .m_body_title h2 {
  font-size: 2.4rem;
  padding: 2% 0;
  font-family: 'Lora', serif;
  border-top: 1px solid #888888;
  border-bottom: 1px solid #888888;
}

.m_body_wrap .m_body_title h2 span{
  font-size: 2.4rem;
  font-family: 'Lora', serif;
}

.m_body_wrap .m_body_title p{
  font-size: 2.0rem;
  padding: 2% 0;
  font-family: 'Lora', serif;
  margin: 0 calc( 50% - 50vw );
  color: #9d9466;
}

.m_body_wrap .m_body_title p span{
  font-size: 2.0rem;
  font-family: 'Lora', serif;
}

.m_body_wrap .m_body_dc {
  width: 94%;
  font-size: 1.5rem;
  padding: 2%;
  margin: auto;
  line-height: 1.5;
  text-align: left;
}

.m_body_dc .body_table_dc_text01 {
  width: 66%;
  margin: 0 auto 3%;
}

#esthe_table {
  max-width: 94%;
  margin: 0 auto;
}

#esthe_table h3 {
  font-size: 2.0rem;
  padding: 2% 0 2%;
}

#esthe_table p {
  padding: 0 0 2%;
  line-height: 1.2;
}

#esthe_table table {
  width: 100%;
  font-size: 1.5rem;
  line-height: 1.5;
  border-collapse: separate;
  border-spacing: 0 25px;
}

#esthe_table table tr {
  box-shadow: 0 0 1px 1px #cccccc;
  border-radius: 10px;
}

#esthe_table table th {
  width: 25%;
  padding: 2%;
  background: rgba(255, 192, 203, 0.33);
  font-family: 'Dancing Script', cursive;
  vertical-align: middle;
  font-size: 2.5rem;
  color: rgba(188, 57, 82, 0.69);
  border-radius: 10px 0 0 10px ;
}

#esthe_table table td {
  text-align: left;
  padding: 2%;
  vertical-align: middle;
}

/*============================
==============================
ここからsitemap.html
==============================
=============================*/

#sitemap_info {
  width: 94%;
  padding: 2% 0px;
  margin: auto;
}

#sitemap_info > section {
  width: 74%;
  margin: auto;
}

#sitemap_info h1 {
  font-size: 2rem;
  line-height: 1.3;
  background-color: rgba(206, 206, 206, 0.2);
  padding: 2% 0;
  margin: 0 auto 4%;
  border-top: 1px solid #888888;
  border-bottom: 1px solid #888888;
  font-family: 'Lora', serif;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

#sitemap_info p {
  font-size: 1.8rem;
  line-height: 1.5;
  text-align: center;
}

#sitemap_info h2 {
  margin: 3% 0;
  font-size: 1.6rem;
  line-height: 1.5;
  text-align: center;
}

ul.sitemap_list {
  padding: 3% 0;
  width: 76%;
  margin: auto;
}

.sitemap_list li {
  position: relative;
  width: 100%;
  text-align: left;
  margin: 8% auto;
  box-shadow: 0 0 1px 1px #888888;
}

.sitemap_list li a {
  font-size: 1.6rem;
  color: #444444;
  transition: 0.3s;
  display: block;
  padding: 0.8em 9%;
}

.sitemap_list li a:hover {
  opacity: 1;
  background: #eeeeee;
}

.sitemap_list li a:before {
  position: absolute;
  content:'';
  top: 0.8em;
  left: 1em;
  height: 0;
  width: 0;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent #00cafa;
}

.sitemap_list li a:hover:before {
  border-color: transparent transparent transparent rgb(0, 153, 234);
}