@charset "UTF-8";

html {
 overflow: auto; /********** ←重要　**********/
}


body{
 overflow: hidden; /********** ←重要　**********/
 font-family: "游ゴシック","游ゴシック体", YuGothic, "YuGothic M", sans-serif;
 margin: 0;
 padding: 0;
 background-color: #cccc99;
 color: #333333;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box; 
}

div img{
 vertical-align: top;
 max-width: 100%;
 height: auto;
 /* border: 1px solid #d5d5d5;
 box-sizing: border-box;*/
}
a {
 color:#333333;
 text-decoration: none;
}


.warpper{
 width: 100%;
}
.main-menu{
 overflow: hidden; /***********************************************************    **************/
 width: 100%;
 height: auto;
 margin-top: 0px;
 margin-bottom: 0px;
 background-image: url(../img/bg_03.jpg);
 /*background: linear-gradient(#829ebc,#225588);
 background-color:#537da8;*/
 z-index: 999;
}
.main-menu-in{
 margin: 0 auto;
 max-width: 1200px;
}
.container{
 position: relative;
 max-width: 1200px;
 margin: 0 auto;
 padding: 25px 10px 70px 10px; /* ←コンテンツの余白を開ける */
 background-color:#FFFFFF;
 box-sizing: border-box;
}
.side-menu{
 width: 25%;
 height: auto;
 float: left;
 font-size: 16px;
 text-align: left;
 /*background-color: #ccecfa;*/
}
.main-content{
 padding: 0px 0px 0px 20px;
 width: 75%;
 height: auto;
 float: left;
 font-size: 16px;
 text-align: left;
 box-sizing: border-box;
 background-color: #FFFFFF;
}








/* 回り込み回避 */
.clearfix::after{
 content: "";
 display: block;
 clear: both;
}
/* 説明文画像配置 */
.space-01{
 width: 1%;
 height: auto;
 float: left;
 font-size: 16px;
 /*background-color: #FFFF00;*/
}
.space-02{
 width: 2%;
 height: auto;
 float: left;
 font-size: 16px;
 text-align: left;
 /*background-color: #FFFF00;*/
}
.space-22{
 width: 23.5%;
 height: auto;
 float: left;
 font-size: 12px;
 text-align: left;
 line-height: 18px;
 /*background-color: #FFFF00;*/
}
.space-34{
 width: 34%;
 height: auto;
 float: left;
 font-size: 16px;
 text-align: left;
 /*border: 1px solid #d5d5d5;*/
}
.space-44{
 width: 44%;
 height: auto;
 float: left;
 font-size: 16px;
 text-align: left;
 box-sizing: border-box;
 /*border: 1px solid #d5d5d5;*/
}
.space-47{
 width: 47%;
 height: auto;
 float: left;
 font-size: 16px;
 text-align: left;
 box-sizing: border-box;
 /*border: 1px solid #d5d5d5;*/
}
.space-47b{
 width: 47%;
 height: auto;
 float: right;
 font-size: 16px;
 text-align: right;
 box-sizing: border-box;
 /*border: 1px solid #d5d5d5;*/
}
.space-50{
 width: 50%;
 height: auto;
 float: left;
 font-size: 16px;
 text-align: left;
 box-sizing: border-box;
 /*border: 1px solid #d5d5d5;*/
}
.space-55{
 width: 55%;
 height: auto;
 float: left;
 font-size: 16px;
 text-align: left;
 box-sizing: border-box;
 /*border: 1px solid #d5d5d5;*/
}
.space-65{
 width: 65%;
 height: auto;
 float: left;
 font-size: 16px;
 text-align: left;
 /*border: 1px solid #d5d5d5;*/
}
.space-100{
 width: 100%;
 height: auto;
 float: left;
 font-size: 16px;
 text-align: left;
 /*text-align: right;*/
 /*margin: 0 auto;*/
 /*border: 1px solid #d5d5d5;*/
}

/* 説明文配置 */
.text-box{
 padding: 0px 0px;
 width: 100%;
 float: left;
 font-size: 16px;
 text-align: left;
 /*background-color: #fad5cc;*/
 /*border: 1px solid #d5d5d5;*/
 box-sizing: border-box;
}
/* 見出しデザイン（実線） 太さ 色 （ボックス内使用） */
.text-title-line{
 border-bottom: solid 2px #555555;
 font-size: 22px;
 font-weight: bold;
}
.tag-p p{
 margin-bottom: 0;
}
/* 3つの画像配置 */
.space-32{
 width: 32.5%;
 height: auto;
 float: left;
 text-align: left;
 /*border: 1px solid #d5d5d5;
 background-color: #956bf7;*/
}
/* 4つの画像配置 */
.space-24{
 width: 24%;
 height: auto;
 float: left;
 text-align: left;
 /*border: 1px solid #d5d5d5;
 background-color: #956bf7;*/
}
.text-manual{
 font-size: 16px;
 text-align: left;
}

/************** 640px対応 **************/
@media screen and (max-width: 640px) {
 .main-menu, .side-menu, .main-content{
    float: left;
    padding: 0 !important;
    width: 100% !important;
    font-size: 18px;
    text-align: left;
 }
 .main-menu, .side-menu{
    padding-bottom: 10px !important;
 }
 .space-65, .space-34{
    float: left;
    margin: 0px;
    width: 100% !important;
    font-size: 18px;
    text-align: left;
 }
 .space-01{
    float: left;
    margin: 0px;
    width: 100%;
    height: 5px !important;
 }
 .space-02{
    display: none;
   /* float: left;
    margin: 0px;
    width: 100%;
    height: 5px !important;
   */
 }
 .space-22{
    float: left;
    margin: 0px;
    width: 100% !important;
    font-size: 18px;
    text-align: left;
    line-height: 20px;
 }
 .space-32, .space-24{
    float: left;
    margin: 0px;
    width: 100% !important;
    font-size: 18px;
    text-align: left;
 }
  .space-44, .space-55{
    float: left;
    margin: 0px;
    width: 100% !important;
    font-size: 18px;
    text-align: left;
 }
.space-47{
    float: left;
    margin: 0px;
    width: 100% !important;
    font-size: 18px;
    text-align: left;
}
.space-47b{
    float: left;
    margin: 0px;
    width: 100% !important;
    font-size: 18px;
    text-align: left;
}
  .space-50{
    float: left;
    margin: 0px;
    width: 100% !important;
    font-size: 18px;
    text-align: left;
 }
  .space-100{
    float: none;
    margin: 0px;
    width: 100% !important;
    font-size: 18px;
    /*text-align: left;*/
    text-align: center;
 }


.text-manual{
 font-size: 18px;
 text-align: left;
}

/* 表示順指定 */
.display-box{
 display: flex;
}
/* 表示順指定 */
 .display-box{
    flex-direction: column;
 }
  .order1 {
    order: 1;
  }
  .order2 {
    order: 2;
  }
  .order3 {
    order: 3;
  }
  .order4 {
    order: 4;
  }
  .order5 {
    order: 5;
 }
  .order6 {
    order: 6;
 }
  .order7 {
    order: 7;
 }
}

/************** 768px対応 **************/
@media screen and (max-width: 768px) {
 .main-menu, .side-menu, .main-content{
    float: left;
    padding: 0 !important;
    width: 100% !important;
    font-size: 18px;
    text-align: left;
 }
 .main-menu, .side-menu{
    padding-bottom: 10px !important;
 }
 .space-65, .space-34{
    float: left;
    margin: 0px;
    width: 100% !important;
    font-size: 18px;
    text-align: left;
 }
 .space-01{
    float: left;
    margin: 0px;
    width: 100%;
    height: 5px !important;
 }
 .space-02{
    display: none;
   /* float: left;
    margin: 0px;
    width: 100%;
    height: 5px !important;
   */
 }
 .space-22{
    float: left;
    margin: 0px;
    width: 100% !important;
    font-size: 18px;
    text-align: left;
    line-height: 20px;
 }
 .space-32, .space-24{
    float: left;
    margin: 0px;
    width: 100% !important;
    font-size: 18px;
    text-align: left;
 }
  .space-44, .space-55{
    float: left;
    margin: 0px;
    width: 100% !important;
    font-size: 18px;
    text-align: left;
 }
.space-47{
    float: left;
    margin: 0px;
    width: 100% !important;
    font-size: 18px;
    text-align: left;
}
.space-47b{
    float: left;
    margin: 0px;
    width: 100% !important;
    font-size: 18px;
    text-align: left;
}
  .space-50{
    float: left;
    margin: 0px;
    width: 100% !important;
    font-size: 18px;
    text-align: left;
 }
  .space-100{
    float: none;
    margin: 0px;
    width: 100% !important;
    font-size: 18px;
    /*text-align: left;*/
    text-align: center;
 }


.text-manual{
 font-size: 18px;
 text-align: left;
}

/* 表示順指定 */
.display-box{
 display: flex;
}
/* 表示順指定 */
 .display-box{
    flex-direction: column;
 }
  .order1 {
    order: 1;
  }
  .order2 {
    order: 2;
  }
  .order3 {
    order: 3;
  }
  .order4 {
    order: 4;
  }
  .order5 {
    order: 5;
 }
  .order6 {
    order: 6;
 }
  .order7 {
    order: 7;
 }
}


/* google map配置 */
.google_map{
    position:relative;
    width: 100%;
    height: 0;
    padding-top: 85%;
 border: 1px solid #d5d5d5;
}
.google_map iframe{
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}

/* 罫線 */
.hr-01 {
 border-bottom: dotted 1px #aaa;
 margin-bottom: 20px;
 width: 100%;
}
/***********************************************************************
* メニュー画像範囲
************************************************************************/
.placement-3{
  width: 100%;
  margin: 0 auto;
  text-align: center;
  /* background-color:#537da8; */
}
.place-3{
  display:flex;
}
.place-3 img{
  width: 95%;
}
@media screen and (max-width: 768px) {
 .placement-3{
  max-width: 100%;
 }
}




/***********************************************************************
* ヘッダー範囲
************************************************************************/
 /*
.header {
 clear:both;
 position: relative;
 width: 100%;
 height: 80px;
 float: left;
 background: #FFFFFF;
 border-top: 5px solid #225588;
 border-bottom: 2px solid #225588;
}
*/

.header-wrapper {
 position: relative;
 margin: 0 auto;
 max-width: 1200px;
 height: 72px;
 background: #FFFFFF;
 padding-bottom: 5px; 
}

.header-logo-img {
 float: left;
 max-width:100%;
 height: auto;
 margin: 10px 0px 0px 10px;
 margin-bottom: 0;
}
.header-logo-img img{
 border-style: none;
}

.header-right {
 margin-left: 410px;
 padding-top: 5px; 
 text-align: right;
}
.header-right a{
 color: #333333;
 font-size: 12px;
 text-decoration: none;
}
.header-right2 {
 margin-left: 410px;
 text-align: right;
 font-weight: bold; /* normal bold */
 font-size: 24px;
 color: #333333;
 text-decoration: none;
 padding-top: 5px; 
}
.fa_mail::before {
 font-family: fontawesome;
 content: "\f003";
 margin-top: .3em;
 margin-right: .3em;
 font-size: 24px;
 color: #333333;
 display: inline-block;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
.fa_phone::before {
 font-family: fontawesome;
 content: "\f098";
 margin-top: .3em;
 margin-right: .3em;
 font-size: 24px;
 color: #333333;
 display: inline-block;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
@media (max-width: 768px) {
 .wrapper, .header-wrapper, .header-logo, .header-right{
   float: none;
   margin: 0;
   width: auto;
  }
 .header-right, .header-right2{
   display: none;
  }
.header-logo-img img {
   margin: 0px 0px 0px 5px;
   display: block;
   max-width: 100%;
   height: auto;
  }
}


/*******************************************************************
 メインメニュー設定
*******************************************************************/
ul.topnav {
 overflow: hidden;
 margin: 0;
 padding: 0;
 list-style-type: none;
 background-image: url(../img/bg_03.jpg);
 /*background: linear-gradient(#829ebc,#225588);
 background-color:#537da8;*/
 /*background-color: #da3c41;*/ /* 通常のの背景色 */
}
ul.topnav li {
 float: left;
 width: 16.666666%;
 border-right: 1px solid #FFFFFF;
 box-sizing: border-box;
}
ul.topnav li:first-child {
 border-left: 1px solid #FFFFFF;/* #FFFFFF */
}
/*
ul.topnav li:last-child {
 border: none;
}
*/
ul.topnav li a {
 display: block;
 padding: 6px 16px;
 text-align: center;
 text-decoration: none;
 color: #FFFFFF;
}
ul.topnav li a:hover:not(.active) {
 background-color: #1b2538; /* オンマウス時の背景色 */
}
ul.topnav li a.active {
 background-image: url(../img/bg_03.jpg);
 /*background: linear-gradient(#829ebc,#225588);
 background-color:#537da8;*/ /* 開いているページの背景色 */
}
/*
ul.topnav li.right {
 float: right;
}
*/
@media screen and (max-width: 768px) {
 .main-menu{
  background-color: #FFFFFF !important;
}
   ul.topnav li.right, ul.topnav li{
   float: none;
   width: 100%;
   border-bottom: 1px solid #FFFFFF;
   border-left: 1px solid #FFFFFF;
   border-right: 1px solid #FFFFFF;
  }
  /* ul.topnav li.right, ul.topnav li:last-child {
   border: none;
  }*/

}

/*******************************************************************
 サイド折りたたみメニュー設定
*******************************************************************/
.side_menu-title,
.toggle{
 width: 100%;
 margin: 0 auto;
}
.side_menu-title{
 display: block;
 pointer-events: none;
 padding: 14px 0px;
 background-image: url(../img/bg_03.jpg);
 /*background: linear-gradient(#829ebc,#225588);
 background-color:#537da8;*/
 color: #fff;
 cursor : pointer;
}
input{
 display: none;
}
.toggle{
 padding: 0px 0px;
 list-style: none;
 background: #FFFFFF;
}
.toggle li{
 border-bottom: solid 1px #2d1e17; /* aaa */
 border-left: solid 1px #2d1e17;
 border-right: solid 1px #2d1e17;
}
ul.toggle li a:hover:not(.active){
 background-color: #fcefe8; /* オンマウス時の背景色 */
}

.toggle li a{
 display: block;
 padding: 14px 0px;
 text-decoration: none;
 color: #333333;
 font-size: 16px;
}
.list-ico::before{
  font-family: "Font Awesome 5 Free";
  margin-left: 10px;
  font-weight: 900;
  content: "\f039";
  font-size: 20px;
  color: #FFFFFF;
}
.arrows-ico::before{
  font-family: "Font Awesome 5 Free";
  margin-left: 10px;
  font-weight: 700;
  content: "\f054";
  font-size: 20px;
  color: #666666;
}

@media screen and (max-width: 768px){
 .side_menu-title{
   pointer-events: all;
   width: 100%;
}	
 .toggle{
   width: 100%;
   height: 0;
   padding: 0 0px;
   transition: .2s;
}
 input:checked + .toggle{
   height: auto;
   padding: 0px;
}
 .toggle li{
   line-height: 0;
   visibility: hidden;
   opacity: 0;
   transition: 
   padding .2s,
   line-height .2s,
   visibility .1s,
   opacity .1s;
}
 input:checked + .toggle li{
   line-height: 1.5;
   visibility: visible;
   opacity: 1;
}
 .toggle li a span{
  font-size: 20px;
}
}

/*******************************************************************
 バナーコンテンツ設定
*******************************************************************/
.content-banner{
 position: relative;
 width: 100%;
 margin: 0 auto;
 float: left;
 /*border: solid 1px #AAAAAA;*/
 box-sizing: border-box;
 display: block;
}

/*
@media screen and (max-width: 768px) {
   content-banner {
   position: absolute;
   float: left;
   max-width: 100%;
   border: solid 1px #AAAAAA;
   box-sizing: border-box;
  }
}
*/
/***********************************************************************
* バナースマホ用画像（PCとスマホで順序入れ替え）
************************************************************************/
.not-show {
 display: none;
}
/* バナーの順序入れ替え */
@media screen and (max-width: 768px){
  .not-show {
    display: block;
  }
  .content-banner {
    display: none;
  }
  .content-banner img{
    border: 1px solid #d5d5d5;
    box-sizing: border-box;
  }
}


/*******************************************************************
 ヒストリーフォトコンテンツ設定（画像を隙間無く配置）
*******************************************************************/
.history-photo{
 position: relative;
 line-height:0;
 -webkit-column-count:2;
 -webkit-column-gap:0;
 -moz-column-count:2;
 -moz-column-gap:0;
 column-count:2;
 column-gap:0;
 margin-top: 20px;
}
.history-photo img{
 width:100%!important;
 height:auto!important;
 border:none;
}
.history-text{
 padding: 5px 5px;
 width: 100% !important;
 line-height: 18px;
 color: #333333;
 font-size: 16px;
 text-align: left;
 /*border: solid 1px #AAAAAA;
 box-sizing: border-box;*/
}


@media(max-width:768px){
 .history-photo{
 -moz-column-count:1;
 -webkit-column-count:1;
 column-count:1;
 width: 100%;
 }
}
@media(max-width:640px){
 .history-photo{
 -moz-column-count:1;
 -webkit-column-count:1;
 column-count:1;
 width: 100%;
 }
}


/*******************************************************************
 ヒストリー画像設定（画像を横に配置）
*******************************************************************/
.history-45_left1{
  background-color: green;
  width: 45%;
  height: auto;
  float: left;
}
.history-55_right1{
  background-color: yellow;
  width: 55%;
  height: auto;
  float: left;
}
.history-45_left2{
  background-color: red;
  width: 45%;
  height: auto;
  float: left;
}
.history-55_right2{
  background-color: blue;
  width: 55%;
  height: auto;
  float: left;
}
.history-100{
  background-color: gray;
  width: 100%;
  height: auto;
}
@media screen and (max-width: 768px) {
   .history-45_left1{
   float: left;
   width: 100% !important;
   border: solid 1px #AAAAAA;
   box-sizing: border-box;
  }
   .history-55_right1{
  float: left;
   width: 100% !important;
   border: solid 1px #AAAAAA;
   box-sizing: border-box;
  }
   .history-45_left2{
   float: left;
   width: 100% !important;
   border: solid 1px #AAAAAA;
   box-sizing: border-box;
  }
   .history-55_right2{
  float: left;
   width: 100% !important;
   border: solid 1px #AAAAAA;
   box-sizing: border-box;
  }
   .history-100{
   float: none;
   width: 100% !important;
   border: solid 1px #AAAAAA;
   box-sizing: border-box;
  }
}

/*******************************************************************
 料金表リスト設定
*******************************************************************/
.menu-position{
  max-width: 1000px;
  margin:0 auto;
  font-size: 18px;
}


.text-left,
.text-right{
  color: rgba(255,255,255,.4);
  padding: 2%;
  text-align: center;
}
img{
  max-width: 100%;
  height: auto;
}
 
/* Responsive */
@media ( min-width : 768px ){
    .flexbox{
      width: 100%;
      margin: 0 auto;
      display: -webkit-flex;
      display: flex;
    }
  .text-left,
  .text-right{
    -webkit-flex: 1;
    flex: 1;
    background: none;
  }
}

.tableSample{
  width: 100%;
  border-collapse: collapse;
}
.tableSample th,td{
  padding: 5px 15px;
  border: 1px solid #ddd;
  color: #777;
}
.tableSample th{
  background: #e8ecd4; /* #f4f4f4 */
  width: 70%;
  text-align: left;
  color: #777;
}

@media only screen and (max-width:768px) {
.tableSample th,td{
  width: auto;
  display: block;
  border-top: none;
}
/*.tableSample tr:first-child{
  border-top: 1px solid #d5d5d5;
 }*/
}
/*******************************************************************
 フッターメニュー設定
*******************************************************************/

#footer01 {
 position: relative;
 background: #222;
}


#footer01 .logo {
 text-align: center;
 padding: 20px 0;
 border-bottom: 1px solid #000;
}


/*
#footer01 .footer-nav {
 height: 1px;
 background-image: linear-gradient(
 90deg,
 hsla(0, 0%, 100%, 0),
 hsla(0, 0%, 100%, 0.5) 50%,
 hsla(0, 0%, 100%, 0) 100%);
}
*/



#footer01 .logo a {
 display: inline-block;
}
#footer01 .logo img {
 width: 90%; /*===============================*/
 border-style:none;
}
#footer01 .footer-nav a {
 display: block;
 padding: 0px 20px;
 color: #FFFFFF;
 font-size: 16px;
 text-decoration: none;
 text-align: center;
}
#footer01 .footer-nav li {
 list-style: none;
}
#footer01 .copyright{
 padding: 20px 0px;
 text-align: center;
 color: #FFFFFF;
 font-size: 12px;
 font-weight: bold;
}


@media only screen and (min-width: 769px) {
  #footer01 .footer-nav {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 20px 0;
  }
  #footer01 .footer-nav a:hover {
    color: #E8D5AE;
  }
}


@media only screen and (max-width: 768px) {
  #footer01 {
    text-align: center;
  }
  #footer01 .footer-nav li {
    border-top: 1px solid #555555;
  /*margin-right: 40px;*/ /*=========================================== フッターの罫線左へ調整 */
margin-right: 40px;
  }
  #footer01 .footer-nav li:last-child {
    border-bottom: 1px solid #555555;
  }
  #footer01 .footer-nav li a {
    padding: 12px 0px;
    text-align: center;
  }
  #footer01 .footer-nav a:hover {
    color: #E8D5AE;
  }
  #footer01 .copyright{
    padding: 20px 0px;
    text-align: center;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: bold;
  }
}

/***********************************************************************
* サイドメニューとバナーを追従
************************************************************************/
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 10px;
}

/***********************************************************************
* トップへ戻るボタン
************************************************************************/
.backtotop {
 position: fixed;
 right: 1%;
 bottom: 85px;
 z-index: 10;
 display: none;
}    

.backtotop a {
 display: block;
 color: #FFFFFF;
 padding: 3px 16px; /* 上・右・下・左の順 余白 */
 margin: 0;
 background-image: url(../img/bg_03.jpg);
 /*background: linear-gradient(#829ebc,#225588);
 background-color:#537da8;*/
 border-radius: 3px;
 text-decoration: none;
 font-weight: bold;
 font-size: 14px;
}

.backtotop-ico::before{
  font-family: "Font Awesome 5 Free";
  margin: 0 auto;
  content: "\f106";
  font-size: 38px;
  color: #FFFFFF;
}





.backtotop a:hover {
 background: #1b2538;
 color: #FFFFFF;
 /*opacity: 0.7;*/
}
@media only screen and (max-width: 768px) {
  .backtotop {
    bottom: 0px;
  }
}

/***********************************************************************
* 問い合わせフォームボタン
************************************************************************/
.btn-flat-simple {
  position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 0.25em 0.5em;
  text-decoration: none;
  color: #00BCD4;
  background: #ECECEC;
  transition: .4s;
}

.btn-flat-simple:hover {
  background: #00bcd4;
  color: white;
}
/***********************************************************************
* 詳細を見るボタン
************************************************************************/
.shosai-btn-container {
  margin: 0 auto;
  width: 100%;
  text-align: center;
  padding: 10px 0px;
}
.shosai-btn-border {
  display: inline-block;
  max-width: 180px;
  text-align: left;
  border: 2px solid #225588;
  font-size: 14px;
  color: #225588;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 4px;
  transition: .4s;
}

.shosai-btn-border:hover {
  background-color: #225588;
  border-color: #225588;
  color: #FFF;
}