@charset "UTF-8";

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


	


/*---------------------------------------------
02. layout
---------------------------------------------*/
body {
  width: 100%;
  margin: 0;
  font-family: 'Montserrat','Open Sans', Helvetica, Arial, Verdana, 'メイリオ', Meiryo, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN','ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  line-height: 1.5;
  font-size: 14px;
  background-color:#FFF;
  color: #404051;
  -webkit-text-size-adjust: 100%; }

#page-top,
.page-top {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 55px;
	z-index:9999;
	font-family: 'Montserrat';
    font-weight: 400;
	letter-spacing:.06em;
    font-size: 80%;
}
#page-top a,
.page-top a {
    background: #00B6CB;
    text-decoration: none;
    color: #fff;
    width: 100%;
    height: 55px;
    text-align: center;
        /*　box要素縦中央 */
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
    align-items: center; /* 縦方向中央揃え */
    -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
    justify-content: center; /* 横方向中央揃え */
    
}
    
#page-top a:hover,
.page-top a:hover {opacity: 1!important;}
#page-top a:active,
.page-top a:active {opacity: 1!important;}
#page-top a:visited,
.page-top a:visited {opacity: 1!important;}

    
#reserved {
    position: fixed;
    top: 45%!important;
    right: 40px;
	z-index:9999;
	font-family: 'Montserrat';
	letter-spacing:.06em;
    font-size: 90%;
    opacity: 1!important;
}
#reserved a {
    background: #CCAF71;
    text-decoration: none;
    border-radius: 6px;
    color: #fff;
    width: 140px;
    height: 65px;
    text-align: center;
    transform: rotate(-90deg);
    opacity: 1!important;
        /*　box要素縦中央 */
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
    align-items: center; /* 縦方向中央揃え */
    -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
    justify-content: center; /* 横方向中央揃え */
}
    
#reserved a:hover {opacity: 1!important;}
#reserved a:active {opacity: 1!important;}
#reserved a:visited {opacity: 1!important;}




/*---------------------------------------------
header
---------------------------------------------*/

#header {
width: 100%;
}


#header ul{ margin:0; padding:0;}
#header li{ margin:0; padding:0;}


#header .inner {
width: 100%;
text-align:center;
margin: 20px 0; }

#header .inner .logo { width:100%; position: relative; z-index: 9998;}
#header .inner .logo img { width:180px;}


#header .inner .contact { display: none;}
#header  .snsarea{ display: none;}
#header .inner .gnavi{display: none;}

	
/*---------------------------------------------------
	# Navigation
---------------------------------------------------*/


.menuarea{display: block; width:27px; height:22px; position: relative; z-index: 99999; float: right; margin: -60px 25px 0 0; text-align: center;}
.menuarea a{ width:27px; height: 22px; }
.menuarea a:hover .menu-line span{background-color: #333;}

/* ハンバーガーメニュー*/ 
.menu-line,
.menu-line span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
.menu-line {
  position: relative;
	z-index: 2;
  top:0;
  width: 27px;
  height:22px;
}
.menu-line span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #666;
  padding-bottom:1px; 
}
.menu-line span:nth-of-type(1) {
  top: 0;
}
.menu-line span:nth-of-type(2) {
  top: 10px;
}
.menu-line span:nth-of-type(3) {
  bottom: 0;
}

/* アニメーション*/
.menu-trigger.active span:nth-of-type(1) {
  -webkit-transform: translateY(10px) rotate(-45deg);
  transform: translateY(10px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
  -webkit-transform: translateY(-10px) rotate(45deg);
  transform: translateY(-10px) rotate(45deg);
}


/* ナビゲーション */

#navigation{
  position: fixed;
  display: none;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: #fff;
  opacity: 0.94;
  z-index: 99998;
}

#navigation .navigation_inner{
  display: table;
  width: 100%;
  height: 100%;
}
#navigation .navigation_inner ul{margin: 0;padding: 0;}


#navigation .navigation_inner .navigation_menu{
	list-style: none;
	text-align: center;
	margin-top: 60px;
}

#navigation .navigation_inner .navigation_menu li p{
	font-size: 11px;
	color: #00B6CB;
}


#navigation .navigation_inner .navigation_menu .navigation_item{
  width: 100%;
  margin: 0 auto 0 auto;
}


#navigation .menu01,#navigation .menu02,#navigation .menu03,#navigation .menu04{
	font-size:18px;
	letter-spacing:.01em; 
	font-weight: bold;
}

#navigation .navigation_inner .navigation_menu .menu01 a
{
  display: block;
	color: #333;
  padding: 13px 0 13px 0;
  position: relative;
  text-decoration: none;
  line-height: ;
  text-align: center;
}


#navigation .navigation_inner .navigation_menu .menu02
{
  padding: 0 0 18px 0;
  position: relative;
  text-decoration: none;
  line-height: ;
  text-align: center;
}
	
#navigation .navigation_inner .navigation_menu .menu03
{
  padding: 0 0 18px 0;
  position: relative;
  text-decoration: none;
  line-height: ;
  text-align: center;
}


#header  #navigation .snsarea_sp{ width:184px; margin: 0 auto; position: relative;}
#header  #navigation .facebook{width:32px; height:32px; margin:0 0 0 0; background-color:#00B6CB; display: block; float:left;
border-radius: 20%; -moz-border-radius: 20%; -webkit-border-radius: 20%; position: relative;}
#header  #navigation .twitter{width:32px; height:32px; margin:0 0 0 18px;background-color:#00B6CB;  display: block; float:left;
border-radius: 20%; -moz-border-radius: 20%; -webkit-border-radius: 20%; position: relative;}
#header  #navigation .instagram{width:32px; height:32px; margin:0 0 0 18px; background-color:#00B6CB; display: block; float:left;
border-radius: 20%; -moz-border-radius: 20%; -webkit-border-radius: 20%; position: relative;}
#header  #navigation .note{width:32px; height:32px; margin:0 0 0 18px; background-color:#00B6CB; display: block; float:left;
border-radius: 20%; -moz-border-radius: 20%; -webkit-border-radius: 20%; position: relative;}

#header #navigation .facebook img, #header #navigation .twitter img, #header #navigation .instagram img{ position: relative; top:50%; transform: translateY(-50%);}
#header #navigation .facebook a ,#header #navigation .twitter a ,#header #navigation .instagram a{
display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;}


#header #navigation  .contact_sp { width:132px; margin: 0 auto; font-size:11px; font-weight:bold;}
#header #navigation  .contact_sp a {  display:block; height:30px; border:#00B6CB 1px solid; color: #00B6CB;
border-radius:5px;
-webkit-border-radius: 5px;
-ms-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
text-decoration:none;}
#header #navigation  .contact_sp p{position: relative; top:50%; transform: translateY(-50%);}




/*---------------------------------------------
index
---------------------------------------------*/

#index_contents{
	width:100%;
	background-color: #F7F7F7;
	margin-top:0;
	padding-top:0;
	}

.indexdetail{
	width:100%;
    margin:0 auto 0 auto;
}

    
/*
.postarticle{ width:90%; float:none; margin:20px 5% 0 5%;}
*/
    
.postarticle{ width:42.5%; float:left; margin:25px 0 0 5%; padding: 0;}

    
.postarticle .option{background-color:#F7F7F7;}
.postarticle .articlebody{ width:100%; padding:10px 0 0 0; background-color:#F7F7F7; border-top:#00B6CB 3px solid; margin:0;}
.postarticle .articlebody .tourttl{ font-size:13px; margin:0 0 2px 0; line-height:180%;
   -webkit-transition: all 0.1s ease-in-out;
   -moz-transition: all 0.1s ease-in-out;
   -o-transition: all 0.1s ease-in-out;
   -ms-transition: all 0.1s ease-in-out;
   transition: all 0.1s ease-in-out;
/*background:url(../images/icon_article.png) no-repeat; padding:0 0 0 35px;
background-size:24px 24px; background-position:0 8px;*/}
.postarticle .articlebody .tourttl a{text-decoration:none;}
.postarticle .articlebody .tourttl a:hover{
	color:#00B6CB;
	text-decoration:none;
   -webkit-transition: all 0.1s ease-in-out;
   -moz-transition: all 0.1s ease-in-out;
   -o-transition: all 0.1s ease-in-out;
   -ms-transition: all 0.1s ease-in-out;
   transition: all 0.1s ease-in-out;
}
    
.postarticle .articlebody .tourttl p{ font-size:12px; margin-bottom: -15px;}

.postarticle .articlebody .bodytext{ font-size:13px; line-height:200%;}

.postarticle .option dl{ font-size:12px; line-height:100%; letter-spacing:.03em;}
.postarticle .option dt{width:50px; text-align:center; padding:4px; float:left; font-size:11px; color:#FFF; background-color:#00B6CB; margin:6px 0 5px 0;}
.postarticle .option dd{width:100%; padding:0; float:left; margin:0 0 0 0; line-height: 160%;}

.postarticle .cate_name{position: absolute; top: 75px; right: 0; z-index: 100;}
.postarticle .cate_name img{width: 50%; height: auto;}
    
.postarticle .states{position: absolute; top: 75px; left: 0; z-index: 100;}
.postarticle .states img{width: 50%;}	

.postarticle .states2{position: absolute; top: 15px; left: 0; z-index: 100;}
.postarticle .states2 img{width: 50%;}

#newsarea{ width:100%; margin:0 0 20px 0;}
	
.listnews{ width:100%; margin:0 0 1px 0; letter-spacing:.05em; background:url(../images/ico_new02.png); background-repeat:no-repeat; background-size:40px 19px; background-color:#FFF; background-position:15px 14px; padding:0; position:relative; font-size:12px;}

.listnews br{ display:none;}

.listnews a{position:relative; display: block; width:80%; height:auto; padding:14px 2% 14px 18%; text-decoration: underline; color:#333; 
background:none;
   -webkit-transition: all 0.1s ease-in-out;
   -moz-transition: all 0.1s ease-in-out;
   -o-transition: all 0.1s ease-in-out;
   -ms-transition: all 0.1s ease-in-out;
   transition: all 0.1s ease-in-out;
}

.listnews a:hover{background-color:#EEE; width:80%; height:auto; padding:14px 2% 14px 18%; text-decoration:none;
background:none;
   -webkit-transition: all 0.1s ease-in-out;
   -moz-transition: all 0.1s ease-in-out;
   -o-transition: all 0.1s ease-in-out;
   -ms-transition: all 0.1s ease-in-out;
   transition: all 0.1s ease-in-out;
}
.listnewsdate{ font-weight:bold;}
	

.sortarea{width: 100%; margin: 20px auto 0 auto;}
    
.tagarea{width: 90%; float: none; margin:0 auto 20px auto;}
.tagarea li{float: left; margin-right: 1px;}
.tagarea li a{font-size: 12px; display: block;  text-decoration: none; padding: 8px 10px 6px 10px;}
    
.btn_sort{width: 90%; margin: 0 auto 0 auto; float: none;}
.btn_sort li{float: left; width: 32.9%!important; text-align: center; font-size: 11.5px; margin-right: 1px;}
.btn_sort li a{display: block; width:100%!important; height:36px; color: #666; background-color:#FFF; text-decoration: none; 
	transition: all 0.1s ease;
  /*　box要素縦中央 */
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  /* 縦方向中央揃え（Safari用） */
  align-items: center;
  /* 縦方向中央揃え */
  -webkit-justify-content: center;
  /* 横方向中央揃え（Safari用） */
  justify-content: center;
  /* 横方向中央揃え */
	background-image: url(../images/arrow_02.png);
	background-repeat: no-repeat;
	background-size: 14px 14px;
	background-position: 11px 10px;
}
.btn_sort li a:hover{background-color:#00B6CB; color: #FFF; transition: all 0.2s ease;
	background-image: url(../images/arrow_01.png);
	background-repeat: no-repeat;
	background-size: 14px 14px;
	background-position: 11px 10px;
}


.select_sort{width: 90%; height: auto; margin:20px auto 0px auto; position: relative;}

   .select_sort select{
       position: relative;
	   width:100%;
	   height: 50px;
	   margin: 0 0 0 0;
	   float: left;
	   font-size: 13px;
	   border: 1px solid #FFF;
        outline:none;
        text-indent: .5em;
        vertical-align: middle;
        font-size: inherit;
        color: inherit;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
	   	background: url(../images/select_arrow.gif) right 50% no-repeat #FFF;
	   background-size:48px 48px;
    }
   .select_sort select option{

    }
   .select_sort select::-ms-expand {
      display: none;
    }
  .select_sort  select:-moz-focusring { 
      color: transparent; 
      text-shadow: 0 0 0 #828c9a;
    }



/*---------------------------------------------------
	Roop image
---------------------------------------------------*/
#mainvisual01 {
	width:100%;
	height:120px;
	margin:0 0 0 0 ;
	background-image:url(../images/mainvisual.jpg);
	background-size: 1600px 120px;
	background-position:center;
	background-repeat:repeat-x;
}



/*---------------------------------------------
detail
---------------------------------------------*/

#contents{
	width:100%;
	padding:0 0 60px 0;
}

.contentsdetail{
	width:90%;
    margin: 0 auto;
}

.tagdetail{
	width:100%;
    margin:0 0 0 0;
}


.contentsdetail .left{width:100%; margin:20px 0 0 0; float:none;}
.contentsdetail .right{width:100%; margin:20px 0 0 0; float:none;}


.body_title{ width:100%; font-size:16px; letter-spacing:.03em;
padding:15px 0 15px 0; margin:0 0 10px 0;
background:none;
border-top:#00B6CB 4px solid;
border-bottom:#DDD 1px solid; }

.articlebody{ width:100%; font-size:14px; line-height:220%; margin:20px 0 30px 0;}
.detailbody{ font-size:13px; line-height:220%;}
.detailbody li{ display: flex; flex-wrap: wrap; border-top: #DDD 1px solid; padding: 15px 0; }
.detailbody li div.flexL {
    position: relative;
    width: 100%;
    font-weight: bold;
}
.detailbody li div.flexL::after {
    content: "：";
    position: absolute;
    right: inherit;
    top: inherit;
}
.detailbody li div.flexR {
    width: 100%;
}
div.articleBtn {
    margin: 10px 0 0;
}
div.articleBtn a {
    position: relative;
    display: block;
    width: 240px;
    height: 36px;
    background: #00B6CB!important;
    border-radius: 6px;
    color: #FFF;
    line-height: 36px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
}
div.articleBtn a:hover {
    background: #CCAF71!important;
}
/* アイコンのスタイル */
div.articleBtn a::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 24px;
    width: 9px;
    height: 9px;
    margin: auto;
    border-top: 2px solid #FFF;
    border-right: 2px solid #FFF;
    transform: rotate(45deg);
    box-sizing: border-box;
    transition: all 0.3s ease;
}
div.articleBtn a:hover::after {
    right: 21px;
}

.detailbody3{ width:90%; font-size:12px;line-height:200%; margin-top:0; background-color:#F7F7F7; padding:10px 5%;}

.bikounone{ display:none!important;}
.accessnone{ display:none!important;}

.detailbody3 span{ font-weight:bold;}

.detailbody5{ width:100%; font-size:11px;line-height:200%; margin-top:20px;}
.detailbody5 strong{ font-weight:bold;}



.detailbody2{ width: 100%; font-size: 13px; border-top: #DDD 1px solid; border-bottom: #DDD 1px solid; line-height: 200%; padding: 25px 0; margin: 0 0 30px;}
.rout{ width:80px; font-size:10px; color:#00B6CB; text-align:center; border:#00B6CB 1px solid; font-weight:bold;
line-height:100%; padding:6px 0; margin:0 0 10px 0 ;}

.detailbody4{ width: 90%; max-width: 920px; font-size: 11px; background-color: #F7F7F7; padding: 25px 5%; margin: 45px 0 15px; border-top: #00B6CB 2px solid;}
.detailbody4 .left{ width:50%; margin:0 0 15px;}
.detailbody4 .left img{ width:100%; height: auto;}
.detailbody4 .right{ width:100%; font-size:12px;}
.detailbody4 .right .name{ font-weight:bold; font-size:14px; margin:0 0 8px;}
.detailbody4 .right .caption{ font-weight:bold; font-size:11px; margin: 0;}

    
.detailbody6{ width:80%; font-size:12px;line-height:200%; background-color: #FFF; padding:18px 6%; margin:60px auto 0 auto;
border-top:#00B6CB 2px solid;}
.detailbody6 .left{ width:100%; float:none; margin:0;}
.detailbody6 .left img{ width:100%; float:left; margin:0 0 15px 0;}

.detailbody6 .right{ width:100%; float:none; margin:0; font-size:12px; position:relative;}
.detailbody6 .right .name{ font-weight:bold; font-size:14px; margin:0 0 8px 0;}
.detailbody6 .right .caption{ font-weight:bold; font-size:11px; margin: 0;}
    
.guideinfo{ width: 100px; font-size: 11px; color: #fff; text-align: center; background-color: #00B6CB; line-height: 100%; padding: 10px 0; position: absolute; left: 0; top: -32px;}


#itemslide{width:100%; margin:-10px 0 0 0;}
.slideritem{ width:100%;}
.slideitemblock{ width:100%; height:100%; margin: 0 0 0 0;}
.slideitemblock .mainimage{ width:100%; height:auto;}
.slideitemblock .mainimage img{ width:100%; height:auto;}


#gm{}
.mapstyle_detail{width:100%; height:280px; margin:20px 0 20px 0;}
.mapstyle_detail iframe{width:100%; height:280px;}

.btn_caption{
	width:90%;
	font-size:11px;
	line-height:200%;
	padding:15px 5%;
	border:#DDD 1px solid;
	margin:20px auto 20px auto;
	}

.btn_caption a{ color:#00B6CB;}


.btn_estimate{
	width:100%;
	margin:0 auto;
}
.btn_estimate a{
	display:block;
	text-align:center;
	color:#FFF;
	font-size:14px;
	font-weight:bold;
	letter-spacing:.05em;
	text-decoration:none;
	padding:15px 0;
	background-color:#CCAF71;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	}

/*  記事詳細　タグ */ 

.article_tagbody{width: 100%; margin: 20px 0 20px 0;}
.article_tagbody ul{margin: 0 0 0 -10px; padding: 0;}

.article_tagbody li{list-style: none; float: left; margin: 0 10px 20px 10px; }
.article_tagbody li a{font-size: 11px; text-decoration: none; padding: 2px 10px 1px 10px; line-height:220%;}

/**** Tag btn action ****/

.tag-btn {
  background: #999999;
  color: #FFF!important;
  outline: none !important;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
}

.tag-action {
  z-index: 1;
}
.tag-action:after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  right: 0;
  z-index: -1;
  background: #00b9ce;
  transition: all 0.3s ease;
}
.tag-action:hover {
  color: #FFF!important;
}
.tag-action:hover:after {

	left: 0%;
	right: auto;
	width: 100%;
}
.tag-action:active {top: 0;}


/*---------------------------------------------
03. news detail
---------------------------------------------*/
.news_title{ width:100%; font-size:16px; letter-spacing:.03em;
padding:15px 0 15px 0; margin:0 0 20px 0;
background:none;
border-top:#00B6CB 4px solid;
border-bottom:#DDD 1px solid;}

.newsbody{ font-size:13px; line-height:220%; width:100%; position:relative; margin-top:15px;}
.newsdate{ font-size:13px; line-height:100%; letter-spacing:.03em; width:100%; text-align:right; position:relative; margin-top: 10px;}

/*---------------------------------------------
03. 固定ページ
---------------------------------------------*/
#detail_page{
	width:100%;
	background-color: #F7F7F7;
	/*margin-top:0;*/
	padding: 25px 0;
}
.pagetitle{ width:90%; margin:0 auto 0 auto; font-size:16px; font-weight:bold; text-align:center;}
.pagetitle .eng{ width:100%; margin:0 0; color:#00B6CB; font-size:12px;}
.pagetitle .border{ width:40px; margin:8px auto 10px auto; border-top: 3px solid #00B6CB;}


.detail_page2{
	width:100%;
    margin:20px 0 0 0;
}


.privacy{ width:90%; margin:0 auto; letter-spacing:.03em;} 
.privacy .title01{ font-size:18px; font-weight:bold; margin:20px 0 20px 0; } 
.privacy .copy01{ font-size:13px; line-height:220%; margin:20px 0 0 0;}
.privacy .copy01 strong{ font-weight:bold;}
.privacy .title02{ font-size:14px!important; color:#00B6CB; background-color:#FFF; border:#00B6CB 1px solid; font-size:18px; 
font-weight:bold; text-align:center; padding:8px 0 8px 0; margin:20px 0 20px 0;}

.qanda{ width:90%; margin:-28px auto 0 auto; letter-spacing: .05em; line-height: 200%; font-size: 13px;} 

.qa_spmt{margin-top: 45px!important;}
    
.qa_ttl{width: 100%; border-top: 3px solid #00B6CB; padding:20px 0 20px 0; background-color: #FFF;
    font-size:18px; font-weight: bold; color:#565656; margin: 20px 0 15px 0; text-indent: 25px;
}
    
.qa01{
	padding: 22px 0 5px 14%;
	background-image: url(../images/icon_q.png);
	background-size: 32px 32px;
	background-repeat: no-repeat;
	background-position: 0 18px;
	font-weight: bold;
	color: #565656;
}
.qa02{
	padding: 22px 0 5px 14%;
	background-image: url(../images/icon_a.png);
	background-size: 32px 32px;
	background-repeat: no-repeat;
	background-position: 0 18px;
}

.btnarea01{
	width: 100%; 
	text-align: center; 
	font-size: 12px;
	margin: 20px 0 0 0; 
	border-top: #DDD 1px solid; 
	padding: 20px 0 0 0;
}

.btnarea01 img{width:100%; margin-top: 20px;}

/* Insta show*/
.instaarea{width: 90%; margin:20px 5% 0 5%;}
.btn_insta{width: 90%; margin: 30px auto;}
.btn_insta img{width: 100%;}


/*---------------------------------------------
04. Aboutページ
---------------------------------------------*/
.about{width:90%; margin:0 auto;}

.about_ttl01{width:100%; position: relative; margin: 0 0 0 0;}
.about_ttl01 .parts01{width: 100%; position: absolute; top:20vh; left: 0;}
.about_ttl01 .parts01 img{width:47.5%;}

.about_ttl01 .parts02{width: 100%; text-align: right;}
.about_ttl01 .parts02 img{width:100%;}

.about_ttl02{width:100%; margin:50px 0 0 0;}
.about_ttl02 .left{float: none; width:100%; margin:0 0 20px 0; position: relative;}
.about_ttl02 .left img{width:47.5%;}
.about_ttl02 .left .img01{margin-left: 0; z-index: 100; position: relative; float: left; margin-right: 5%}
.about_ttl02 .left .img02{position:relative; left:0; top:0; float: left;}
.about_ttl02 .right{float: none; width:100%; font-size: 14px; line-height: 200%; letter-spacing: .01em;}

.about_ttl02 .right .pc_view{display: none;}
.about_ttl02 .right .sp_view{display: block;}

	
.about_block01{width:90%; background-color: #FFF; padding: 20px 5% 0 5%; margin-top: 20px;}
.about_block01 .ttl01{margin-bottom:20px;}
.about_block01 .ttl01 img{width:70%;}
.about_block01 .parts01 {width: 45%; float: left; margin: 0 2.5% 20px 2.5%;}
.about_block01 .parts01 img{width:100%; }


.about_block01 .ttl02{margin-bottom: 20px;}
.about_block01 .ttl02 img{width:70%;}
.about_block01 .ttl02 .left{float: none; width: 100%; margin-bottom: 20px;}
.about_block01 .ttl02 .right{float: none; width:100%; font-size: 13px; line-height: 180%;}

.about_block01 .parts {width:100%; margin: 0 0; }

.about_block01 .parts02 {float: left; width:45%; margin: 0 2.5% 20px 2.5%;}
.about_block01 .parts02 img{width:100%;}
.about_block01 .parts02 .name{
	width: 90%; 
	position: relative;
	margin: -24px auto  0 auto; 
	padding-top: 12px;
	background-color: #FFF;
	font-size: 12px;
	text-align: center;
}

.about_block01 .parts02 .name p{font-size:9px; margin:6px 0 0 0; }

.about_block01 .centercap{font-size: 10px; margin:0 0 40px 0; text-align: center; letter-spacing: .04em; }
.about_block01 .centercap span{ border-bottom:solid 2px #333; border-style: dotted; padding-bottom: 8px;}


.about_block01 .ttl03{}
.about_block01 .ttl03 img{width:80%;}

.about_block01 .parts03 {width:100%; margin:20px 0 20px 0;}

.about_block01 .parts03 .left{width:10%; float: left; margin-right: 5%;}
.about_block01 .parts03 .left img{width:100%;}

.about_block01 .parts03 .right{width:85%; float: left;}
.about_block01 .parts03 .right .r_block01{width: 100%; float: none; position: relative;}
.about_block01 .parts03 .right .r_block01 .ttl{background-color: #FFF; padding: 10px 20px 0 10px; position: absolute; 
	margin: -20px 0 0 -10px;}
.about_block01 .parts03 .right .r_block01 .ttl .ttl01{width: 125px;}
.about_block01 .parts03 .right .r_block01 .ttl .ttl02{width: 70px;}


.about_block01 .parts03 .right .r_block01 .image {margin: 20px 0 0 0;}
.about_block01 .parts03 .right .r_block01 .image img{width: 100%;}

.about_block01 .parts03 .right .r_block02{width:100%; float:none;}
.about_block01 .parts03 .right .r_block02 .ttl{font-size:16px; letter-spacing: .04em; margin:20px 0 10px;}
.about_block01 .parts03 .right .r_block02 .body{font-size:12px; line-height: 180%; letter-spacing: .04em;}
.about_block01 .parts03 .right .r_block02 .cap{font-size:12px; margin-top: 10px;}

.about_block01 .parts_arrow{width: 100%; text-align: center; margin: 20px 0 0;}
.about_block01 .parts_arrow img{width: 52px; }


.about_block01 .parts04 {width:85%; margin:20px 0 0 15%;}
.about_block01 .parts04 .ttl{font-size:16px; letter-spacing: .04em; margin:18px 0 10px;}
.about_block01 .parts04 .body{font-size:13px; line-height:180%; letter-spacing: .04em;}

.about_block01 .parts03 .fl_area{width: 100%; margin-left:0;}
.about_block01 .parts03 .fl_img01{width: 45%; float: left; margin: 0 2.5% 0 2.5%;}
.about_block01 .parts03 .fl_img01 img{width: 100%;}


/*.about{ width:980px; margin:0 auto; font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro","ＭＳ Ｐ明朝", "MS PMincho", serif; text-align:center;} 
.about .title01{ font-size:26px; letter-spacing:.05em; line-height:180%; margin:40px 0 0 0;} 
.about .copy01{ font-size:13px; letter-spacing:.03em; line-height:220%;} */

/*---------------------------------------------
05. footer
---------------------------------------------*/

#footer {
width: 100%;
text-align:center;
background-color: #F7F7F7;
}
#footer .inner {
margin: 0 auto;
padding: 40px 0 90px 0; }

#footer .logo img { width:160px; margin:30px 0 20px 0;}
#footer .copy { font-size:11px; letter-spacing:.03em;
font-family: 'Montserrat', Helvetica, Arial, Verdana, sans-serif;}

#footer .submenu{ font-size:12px; margin:30px 0 0 0;}


#footer  .snsarea{ width:275px;margin:0 auto; padding:0 0 0 0; }
#footer  .facebook{width:50px; height:50px; margin:0 0 0 0; background-color:#00B6CB; display: block; float:left;
border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; position: relative;}
#footer  .twitter{width:50px; height:50px; margin:0 0 0 25px;background-color:#00B6CB;  display: block; float:left;
border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; position: relative;}
#footer  .instagram{width:50px; height:50px; margin:0 0 0 25px; background-color:#00B6CB; display: block; float:left;
border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; position: relative;}
#footer  .note{width:50px; height:50px; margin:0 0 0 25px; background-color:#00B6CB; display: block; float:left;
border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; position: relative;}

#footer  .facebook img{ margin-top:16px;}
#footer  .twitter img{ margin-top:19px;}
#footer  .instagram img{ margin-top:17px;}
#footer  .note img{ margin-top:16px;}

#footer  .facebook a ,footer  .twitter a ,footer  .instagram a,footer  .note a{
display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;}


/*---------------------------------------------
04. form
---------------------------------------------*/
.formarea{ width:90%; margin:20px auto 0 auto; text-align:left;} 


.formname {
	width:100%;
	float: none;
	margin:0 0 15px 0;
	line-height:140%;
	color:#0d3143;
	padding:10px 0 0 0;
}

.formname .jp{font-size: 14px; font-weight: bold; letter-spacing: .1em;}
.formname .en{font-size: 11px; margin-top:2px; color: #00B6CB;}


  .formborder input {
	width: 90%;
	float: none;
	padding: 5%;
	color:#0d3143;
	border: 1px solid #FFF;
	font-size: 100%;
	margin-bottom: 20px;
}

  .formborder2 input {
	width: 90%;
	float: none;
	padding: 5%;
	color:#0d3143;
	border: 1px solid #FFF;
	font-size: 100%;
	margin-bottom: 20px;
}


  .formborder textarea {
	width: 90%;
	padding: 5%;
	color:#0d3143;
	border: 1px solid #FFF;
	font-size: 100%;
}
.btn_submit {
	width:100%;
	height:90px;
	margin: 30px 0 0 0 ;
}

.btn_submit input {
	width:100%;
	height:90px;
	text-align: -9999px;
	background-image:url(../images/submit.gif);
	background-size:100% 90px;
	border: none;
    background-position: 0 0;
    background-color: transparent;
	cursor: pointer; 
}


   .formselect select{
	   width: 100%;
	   height: 50px;
	   float: none;
	   font-size: 13px;
	   border: 1px solid #FFF;
	   margin-bottom:20px;
        outline:none;
        text-indent: .5em;
        vertical-align: middle;
        font-size: inherit;
        color: inherit;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
	   	background: url(../images/select_arrow.gif) right 50% no-repeat #FFF;
	   background-size:50px 50px;
    }
   .formselect select option{

    }
   .formselect select::-ms-expand {
      display: none;
    }
  .formselect  select:-moz-focusring { 
      color: transparent; 
      text-shadow: 0 0 0 #828c9a;
    }


.btnarea02{
	width: 100%; 
	text-align: left; 
	font-size: 13px;
	line-height: 180%;
	margin: 20px 0 20px 0; 
	border-top: #DDD 1px solid; 
	padding: 20px 0 0 0;
}
.btnarea02 a{color:#00b9ce; }

.formcaption01{width: 100%; margin:0 0 20px 0; font-size: 12px; }
.formcaption02{font-size: 13px; margin-top: 20px; line-height: 200%;}
.thankstitle{font-size: 15px; font-weight: bold; letter-spacing: .1em; text-align: center; margin-bottom: 30px;}
.thanksbody{text-align: center;  margin-bottom: 30px;}
.thanksback{text-align: center;}


/*---------------------------------------------------
	Table color
---------------------------------------------------*/
.colTable {
font-size:12px;
line-height:180%;
border-top: 1px solid #59878F; border-left: 1px solid #59878F; border-right: 1px solid #59878F; }

.colTable th {
padding: 20px 20px;
border-bottom: 1px solid #59878F; border-right: 1px solid #59878F;border-bottom: 1px solid #59878F;
vertical-align: top; }

.colTable td {
padding: 20px 20px;
border-bottom: 1px solid #59878F; }

.colTableback {
font-size:12px;
color: #fff;
font-weight:100;
background-color: #476A71;}


.colTable2 {
font-size:12px;
margin:30px 0 0 0 ;
line-height:180%;background-color:#FFF;
border-top: 1px solid #59878F; border-left: 1px solid #59878F; border-right: 1px solid #59878F; }

.colTable2 td {
padding: 10px 15px;
border-bottom: 1px solid #59878F; }

.colTableback2 {
color: #fff;
font-weight:100;
background-color: #177795;}


.colTable3 {
font-size:12px;
margin:30px 0 0 0 ;
line-height:180%;background-color:#FFF;
border-top: 1px solid #59878F; border-left: 1px solid #59878F; border-right: 1px solid #59878F; }

.colTable3 td {
padding: 10px 15px;
border-right: 1px solid #59878F;
border-bottom: 1px solid #59878F; }

.tdgray{ background-color:#EEE;}



/*---------------------------------------------------
	ボタンセッティング
---------------------------------------------------*/

/*over zoom*/
.view1 {width:100%;height: auto;overflow: hidden;position: relative;text-align: center;cursor: pointer;}
.view1 .mask,.view1 .content {width: 100%;height: auto;position: absolute;overflow: hidden;top: 0;left: 0;}
.view1 img {display: block;position: relative; width: 100%;height: auto;}
.view-first .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   background: rgba(255,255,255, 0.8) /*url(../images/btn_mask.png) no-repeat center 95px*/;
   /*background-size:150px;*/
   -webkit-transition: all 0.1s ease-in-out;
   -moz-transition: all 0.1s ease-in-out;
   -o-transition: all 0.1s ease-in-out;
   -ms-transition: all 0.1s ease-in-out;
   transition: all 0.1s ease-in-out;
}
.view-first:hover .mask {-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=100);opacity: 1;}
.view-first img {
   -webkit-transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
   -moz-transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
   -o-transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
   -ms-transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
   transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.view-first:hover img {
   -webkit-transform: scale(1.1,1.1);
   -moz-transform: scale(1.1,1.1);
   -o-transform: scale(1.1,1.1);
   -ms-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);
}




/*---------------------------------------------------
	検索
---------------------------------------------------*/

#searcharea{display: none;}
#searcharea_sp{margin: 18px 0 15px;}
	
	

/*---------------------------------------------------
	# TOPページ　Slide area
---------------------------------------------------*/

.slidearea {
  width: 100%;
    height: auto;
    margin: 10px auto 0 auto;
  position: relative;
}
.slidearea .slidenumber {
  position: absolute;
  top: 15px;
  right: 20px;
  width: 50px;
  height:18px;
  background-color: #00B9CE;
  font-size: 10px;
  color: #FFF;
  letter-spacing: .07em;
  text-align: center;
  /*　box要素縦中央 */
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  /* 縦方向中央揃え（Safari用） */
  align-items: center;
  /* 縦方向中央揃え */
  -webkit-justify-content: center;
  /* 横方向中央揃え（Safari用） */
  justify-content: center;
  /* 横方向中央揃え */
  z-index: 2;
}

.slidearea .slidenumber img {
  width: 9px;
  margin: -1px 7px 0 7px;
}

.slider {
  position: relative;
  z-index: 1;
}
.slider:before{
  content: "";
  display: block;
  padding-top: 43%;
}
.slider .slide {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
    background-color: #FFF;
}
.slide_img{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.slide_img img {
  width: 100%;
    height: 100%;
  transform: scale(1);
}
.slide-scale .slide_img img {
  transform: scale(1);
  transition: transform 3s ease;
}

.progress{
  position: absolute;
  right: 0;
  top: 0;
  height: 0;
  width: 4px;
  z-index: 3;
  background-color: #00d6f9;
}
.slide-progress .progress{
  transition: height 4.6s linear;
  height: 100%;
}

    
/* -------------  google カレンダー ------------*/
    
.cal_wrapper {
    width: 90%;
  max-width: 90%; /* 最大幅 */
  min-width: 300px; /* 最小幅 */
  margin: 0 auto;
}
    
.googlecal {
  position: relative;
  padding-bottom: 90%; /* 縦横比 */
  height: 0;
  overflow: hidden;
}
.googlecal iframe {
    border: none;
    width: 100% !important;
  height: 100% !important;
}
    
    
/* -------------  アコーディオン ------------*/
    
.accordion-container {
  max-width:100%; /* 最大幅 */
  margin: 20px auto 0 auto;
}
.accordion-container .accordion-title:hover,
.accordion-container .accordion-title:active,
.accordion-title.open { 
  background-color: #00B6CB;
}

    

/* -------------  矢印 ------------*/

.arrowarea_r{width:30px; position: absolute; right:0; top: 42%; z-index:2;}
.arrowarea_l{width:30px; position: absolute; left:0; top:42%; z-index:2;}
    
    

.btn_arrow {
  background: #FFF;
  text-align: center;
  width: 30px;
  height: 30px;
  outline: none !important;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.215, 0.61, 0.325, 1) 0s;
  position: relative;
  display: inline-block;
	z-index:1;
}

.btn_arrow:after {
  content: none;

}
.btn_arrow:hover {
}


.btn_arrow:hover:after {
	left: 0%;
	right: auto;
	height: 100%;
}

.btn_arrow:active {top: 0;}


/*  SVG 色サイズ設定*/
.my_svg01{
	width: 8px;
	height: auto;
	margin-top:8px;
}
.my_svg01 path{
    color:#0d3143;
    fill: currentColor;
	transition: all 0.1s ease;
}
.my_svg01 .st0{fill:#000;}

/*　hover時のSVGカラー
.btn_arrow:hover .my_svg01 .st0{
	fill:#0d3143;
	transition: all 0.1s ease;
}*/

/*　hover時のSVG位置*/
.arrowleft .my_svg01{
	position: relative;
	left:0;
	transition: all 0.3s cubic-bezier(0.215, 0.61, 0.325, 1) 0s;
}

.arrowleft:hover .my_svg01{
	position: relative;
	left:0;
	transition: all 0.3s cubic-bezier(0.215, 0.61, 0.325, 1) 0s;
}
.arrowright .my_svg01{
	position: relative;
	left:0;
	transition: all 0.3s cubic-bezier(0.215, 0.61, 0.325, 1) 0s;
}

.arrowright:hover .my_svg01{
	position: relative;
	left:0;
	transition: all 0.3s cubic-bezier(0.215, 0.61, 0.325, 1) 0s;
}
    
	
    
	
	
}