@charset "UTF-8";
/* CSS Document */

body {margin:0;padding:0;font-family:"メイリオ", Meiryo, "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", sans-serif;font-size: 62.5%;line-height:200%;color:#202526;background:#fff;overflow-x: hidden;-webkit-text-size-adjust: 100%;word-break: break-all;}
ol,ul,li {list-style:none;margin:0;padding:0;}
dl,dt,dd {margin:0;padding:0;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;margin:0;padding:0;}
p {margin:0 0 1em;padding:0;}
a , a img { overflow: hidden; color:#333;text-decoration: none;border:none;}
a:hover,a:active { color: #11833b;border:none;outline:none;}
a:hover img , a:active img {opacity:.7;border:none;outline:none;}

html,body {}
h1 {font-weight:normal;}
h2 {font-weight:normal;}
h3 {font-weight:bold;}
img {max-width: 100%;width:auto;height: auto;display:block;}

main:after,
article:after,
section:after,
div:after,
ul:after,
dl:after {
  content: "";
  display: block;
  clear: both;
}

#pc {display:none;}
.pc {display:none;}

#header {width: 100%; position: relative; min-height:80px;}
#header .head {position:absolute;top:2%;left:0;right:0;margin:0 auto;z-index: 10;display:block;width: 55%;}

#header .head_sub {width: 100%; text-align:right; height:50px;}

#header .head_sub .head_logo {position: absolute; left: 10px; top: 5px;width:40%;}

#header .head_sub p a {position: absolute; left: 10px; top: 5px;}
#header .head_sub p a img {width:30%;}

#header .head_sub nav ul li { width:16%; display: inline-block;margin-right: 5px;}
#header .head_sub nav ul li img { width:85%; margin:5px auto 0;}

.main_wrap {padding:2% 0 0; margin:0 3%;}


.top_ph {width:100%; height:100px; max-width:none; margin:-18% auto 0;background: url(../images/header_bg.png) no-repeat center;background-size:cover; }

#footer {background:#cea479; padding: 5px 0 0;}
.footer_bnr {padding:10% 3.5%;}

.footer_area {padding:10px 5%;max-width:300px;margin:0 auto;text-align:center;}
.footer_area .logo p {text-align:center;font-size:13px;color:#fff;margin:5px auto;}
.footer_area .logo img { margin:0 auto;width:70%; text-align:center;}
.footer_area .contact {width:45%;margin:20px auto 0;text-align:center;font-size:13px;}
.footer_area .contact .policy a {color:#fff;}
.footer_area .contact .policy:before {content:"\f362";font-family:ionicons;font-size:18px;color:#734c23;margin-right:5px;margin-top:-2px;display:inline-block; vertical-align:middle;}
#footer .copy {font-size: 1.2em;color: #000;text-align: center;padding: 10px 0%;background:#fff; border-top:#734c23 solid 5px;}

/* メニューロゴ */

#rect { width: 50%; padding:8px 0; margin:0 auto;text-align:center;}


#menu ul{with:100%;text-align:center; margin:0 auto 3%; padding-left:6%;}
#menu ul li{ display: inline-block; width: 32%; margin:10px auto 0; padding:0 auto;}
#menu ul li img {  width: 75%;padding: 0; }

/* サブページメニューロゴ */
#rect_sub { width: 50%; padding:8px 0; margin:0 2%;text-align:left;}
#sub_menu ul{with:100%;text-align:right; margin:0 auto 3%; padding-left:6%;}
#sub_menu ul li{ display: inline-block; width: 32%; margin:10px auto 0; padding:0 auto;}
#sub_menu ul li img {  width: 75%;padding: 0; }
#sub_menu ul li a:hover img , a:active img {opacity:.7;border:none;outline:none;}


/* Clouds */
#clouds {
  top: -50px;
  position: relative;
  -webkit-animation: move 20s infinite linear;  
  -moz-animation: move 20s infinite linear;  
  -ms-animation: move 20s infinite linear;
}

#clouds2 {
  position: relative;
  -webkit-animation: backup 14s infinite linear;
  -moz-animation: backup 14s infinite linear;
  -ms-animation: backup 14s infinite linear;
}

.cloud1, .cloud2, .cloud3 { 
  opacity: .15;  
}

.cloud1 {
  width: 200px;
  height: 60px;
  background: #00c9ee;
  position: absolute;
  top: -180px;
  
  -webkit-border-radius: 200px;
  -moz-border-radius: 200px;
  border-radius: 200px;
  
}

.cloud1:after {
  content: '';
  position: absolute;
  background: #00c9ee;
  width: 80px;
  height: 80px;
  top: -40px;
  left: 20px;
  
  -webkit-border-radius: 200px;
  -moz-border-radius: 200px;
  border-radius: 200px;

}

.cloud1:before {
  content: '';
  position: absolute;
  background: #00c9ee;
  width: 100px;
  height: 100px;
  top: -60px;
  right: 30px;
  
  -webkit-border-radius: 200px;
  -moz-border-radius: 200px;
  border-radius: 200px;
}

.cloud2 {
  width: 100px;
  height: 30px;
  background: #00c9ee;
  position: absolute;
  top: -180px;
  left: 400px;
  
  -webkit-border-radius: 200px;
  -moz-border-radius: 200px;
  border-radius: 200px;
}

.cloud2:after {
  content: '';
  position: absolute;
  background: #00c9ee;
  width: 40px;
  height: 40px;
  top: -20px;
  left: 10px;
  
  -webkit-border-radius: 200px;
  -moz-border-radius: 200px;
  border-radius: 200px;
}

.cloud2:before {
  content: '';
  position: absolute;
  background: #00c9ee;
  width: 50px;
  height: 50px;
  top: -30px;
  right: 15px;
  
  -webkit-border-radius: 200px;
  -moz-border-radius: 200px;
  border-radius: 200px;

}

.cloud3 {
  width: 200px;
  height: 60px;
  background: #00c9ee;
  position: absolute;
  top: -370px;
  left: 600px;
  
  -webkit-border-radius: 200px;
  -moz-border-radius: 200px;
  border-radius: 200px;
}

.cloud3:after {
  content: '';
  position: absolute;
  background: #00c9ee;
  width: 80px;
  height: 80px;
  top: -60px;
  left: 20px;
  
  -webkit-border-radius: 200px;
  -moz-border-radius: 200px;
  border-radius: 200px;
}

.cloud3:before {
  content: '';
  position: absolute;
  background: #00c9ee;
  width: 100px;
  height: 100px;
  top: -70px;
  right: 30px;
  
  -webkit-border-radius: 200px;
  -moz-border-radius: 200px;
  border-radius: 200px;
}

@-webkit-keyframes move {
  0% {left: 0px;}
  49% {left: 940px; opacity: 1;}
  50% {left: 940px; opacity: 0;}
  51% {left: -940px; opacity: 0;} 
  52% {left: -940px; opacity: 1;} 
  100% {left: 0px;} 
}

@-webkit-keyframes backup {
  0% {left: -940px;}
  100% {left: 940px;}  

}  

@-moz-keyframes move {
  0% {left: 0px;}
  49% {left: 940px; opacity: 1;}
  50% {left: 940px; opacity: 0;}
  51% {left: -940px; opacity: 0;} 
  52% {left: -940px; opacity: 1;} 
  100% {left: 0px;} 
}

@-moz-keyframes backup {
  0% {left: -940px;}
  100% {left: 940px;}  

}  

@-ms-keyframes move {
  0% {left: 0px;}
  49% {left: 940px; opacity: 1;}
  50% {left: 940px; opacity: 0;}
  51% {left: -940px; opacity: 0;} 
  52% {left: -940px; opacity: 1;} 
  100% {left: 0px;} 
}

@-ms-keyframes backup {
  0% {left: -940px;}
  100% {left: 940px;}  

}  

#clouds .cloud1, #clouds .cloud2, #clouds .cloud2:after, #clouds .cloud2:before, #clouds .cloud3, #clouds .cloud1:after, #clouds .cloud1:before, #clouds .cloud3:before, #clouds .cloud3:after {
	background: #00f1ee;
	box-shadow: 0px 0px 20px 5px #00f1ee;	
	-moz-box-shadow: 0px 0px 20px 5px #00f1ee;	
	-webkit-box-shadow: 0px 0px 20px 5px #00f1ee;
}


/* スライダー */
	
    .swiper-container {
      width: 100%;
      height: 100%;
	   background-image: #fff;
	 margin-bottom:5px;
	  
    }
	 .swiper-slide img {
	  width: 98%;
      height:98%;
	  margin-top:43%;
	  margin-bottom:35px;
	  z-index: 2;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
	
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
	

#main { background-image: url(../images/main_bg.png);background-repeat: repeat; }

#header .head {width:100%;max-width:none; margin:auto;}


.concept_box {position:relative;}

.concept_box_in {padding:0 5% 5%;}
.concept_box_in .left {width:75%;float:left; font-size:14px;}
.concept_box_in .left img {max-width:280px;width:90%;margin:5% auto; z-index:99999 !important;}
.concept_box_in .left p {padding-top:10px; line-height:1.8em;position:relative; z-index:9999;}
.concept_box_in .right {width:20%;float:right;max-width:140px; z-index:999 !important; position:relative;}
.concept_box {width:100%; margin:auto;}



#top_contents01 h2 {margin:0 auto;width:60%;max-width: 220px;}
#top_contents01 h2 img {padding-bottom:3%;}


.contents_btn {text-align:center;padding:0 2%;margin:auto;}
.contents_btn li {width:95%;min-height:230px;box-sizing:border-box;margin:5% auto;padding:3%;background:rgba(255,255,255,.5); border-radius: 10px;        /* CSS3草案 */  
   -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */  
}
.img-block .img-01 {width: 55%;border-radius: 50%;margin: 0 auto;border: 11px double rgba(98,128,51,.8);}
.img-block .img-02 {width: 55%;border-radius: 50%;margin: 0 auto;border: 11px double rgba(233,81,24,.8);}
.img-block .img-03 {width: 55%;border-radius: 50%;margin: 0 auto;border: 11px double rgba(77,131,186,.8);}
.img-block img:hover {
	 -webkit-transform: scale(1.05); 
    -moz-transform: scale(1.05); 
     -o-transform: scale(1.05); 
     -ms-transform: scale(1.05); 
    transform: scale(1.05); 
}

.contents_btn li a {color:#333;}
.contents_btn li h3 {font-size:15px;font-weight:normal;margin:15px 0 10px;}
.contents_btn li.box01 h3 {color:#e95018;}
.contents_btn li.box02 h3 {color:#627f32;}
.contents_btn li.box03 h3 {color:#4d83ba;}
.contents_btn li.box04 h3 {color:#875ba2;}
.contents_btn li.box01 {border-bottom:10px solid #e95018;}
.contents_btn li.box02 {border-bottom:10px solid #627f32;}
.contents_btn li.box03 {border-bottom:10px solid #4d83ba;}
.contents_btn li.box04 {border-bottom:10px solid #875ba2;}
.contents_btn li p {font-size:13px;text-align:center; margin:0 auto; padding:0 4em;}
.contents_btn li span {font-size:14px;display:table;padding:5px 10px;line-height:1.5;margin:0 auto 10px;color:#fff;}
.contents_btn li.box01 span {background:#e95018;}
.contents_btn li.box02 span {background:#627f32;}
.contents_btn li.box03 span {background:#4d83ba;}
.contents_btn li.box04 span {background:#875ba2;}



#info {padding:1% 0 8%;}
#info .info_list {background:rgba(255,255,255,.8); border-radius: 14px; margin:3% 3% 0; padding:2% 4%;}
.info_list li {
	padding: 10px 0;
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #734b23;
	text-indent: 1em;
}
.info_list li span.date {font-size:16px;margin-right:5px;}
.info_list li span.date:before {content:"\f363";font-family:ionicons;font-size:16px;margin-right:5px;color:#ff4531;}
.info_list li a {display:block;font-size:16px;position:relative;padding-right:8%;}

#info .inner .info_list h2 {width:50%; margin:2% auto 3%;}


/* サブページ */
	
#top_contents01 h6 {margin:0 auto;width:60%;max-width: 190px;}
#top_contents01 h6 img {padding-bottom:3%;}

#top_contents01 h5 {margin:0 auto;width:60%;max-width: 270px;}
#top_contents01 h5 img {padding-bottom:3%;}



/* 施設概要ページ */
.inner .box {width:92%; margin:1% auto; padding:1% 2%; background:rgba(255, 255, 255, 0.5); border-radius: 20px 20px;}
.inner .box dl {
	font-size: 14px;
	padding: 1em 0;
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #734c23;
}
.inner .box dt {width:20%;float:left;text-align:center;}
.inner .box dd {width:74%;float:left;padding-left:5%;}
.inner .box ol li {list-style: decimal;margin-left:20px;}
.leftbox {width:80%; margin:3% auto 2%;font-size:13px;padding:1em 0; line-height:1.8em;}
.rightbox {width:90%; margin:1% auto 0;font-size:13px;padding:1em 0; line-height:1.8em;}
.message {width:80%; margin: 1% auto 0;padding-bottom:1%;}

.nozominoki {margin:1% auto 0; padding-bottom:15%;}
.nozominoki ul{width: 100%;margin: 0 auto; padding-bottom:1em; font-size:16px;}

.nozominoki li {text-align:center; width: 80%;padding:10px; margin:2% auto;}
.nozominoki li img {padding-bottom:12px;}

#main .ttl  {
	width: 100%;
	height: 100px;
	max-width: none;
	margin: -10% auto 3%;
	background: url(../images/sub_title_company.png) no-repeat center;
	background-size: cover;
	border-bottom: 5px solid rgba(141, 194, 64, 0.8);
}

#main .ttl_02  {
	width: 100%;
	height: 100px;
	max-width: none;
	margin: -10% auto 3%;
	background: url(../images/sub_title_guide.png) no-repeat center ;
	background-size: cover;
	border-bottom: 5px solid rgba(141, 194, 64, 0.8);
}
.message h3 {line-height: 1.3;padding: .3em .75em;margin-bottom:4%;border: 2px solid #e95118;
border-radius:10px;font-size: 20px;color: #fff;background:#e95118; }

.message .flow {position:relative;padding:0;margin:0 auto;}
.message .flow:before {content:"";display:block;width:80%;position:absolute;top:0;right:0;}
.message .flow:after {content:"";display:block;width:100%;position:absolute;top:0;right:0;}
.message .flow li {padding: 3% 4%;float:left;width:50%;box-sizing:border-box;}
.message .flow li  {background-position:center;background-repeat:no-repeat;background-size:cover;display:block;padding:15% 10%;}
.message .flow li  span {padding:0;display:block;}
.message .flow li.item01  {background-image:url(../images/flow_bg_sp.png);}
.message .flow li.item02  {background-image:url(../images/flow_bg_sp02.png);}
.message .flow li.item03  {background-image:url(../images/flow_bg_sp03.png);}
.message .flow li.item04 {background-image:url(../images/flow_bg_sp04.png);}

/* ご利用ガイドページ */

.guide_info {font-size: 16px;margin: 1.5em;line-height: 1.8em; padding:1em 1em 0; }
.guide_info02 {font-size: 16px;margin: 0 1.5em;line-height: 1.8em; padding:0 1em 0;text-indent:-1em;}
.guide_info03 {font-size: 20px; font-weight:bold; margin: 0 1em;line-height: 1.5em; padding:0 1em 0;text-indent:-1em;}
#main .inner .guide_ttl h8 {width:100%; text-align:left;font-size:18px;padding:0 .5em .3em; line-height:2.1em;border-bottom: 4px solid #ff4531; }
#main .inner .guide_ttl {padding:2% 0;}
.guide_info img {width:70%; margin:1.5em;}

table.type14 {
	width:97%;
	font-size:14px;
	border-collapse: collapse;
	text-align: center;
	line-height: 1.2;
	border-left: 1px solid #ccc;
	margin:2% auto;
}

table.type14 thead th  {
	padding: 10px;
	color:#fff;
	text-align:center;
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	background: #ff4531;
}
table.type14 tbody th  {
	width:12%;
	padding: 10px;
	vertical-align: middle;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	background: #ececec;
}

table.type14 td {
	width: 9%;
	padding: 10px;
	vertical-align: middle;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	text-align:center;
	background: #fff;
}

@media screen and (min-width:375px) {
#header .head_sub {width: 100%; text-align:right; height:60px;}
#header .head_sub p a {position: absolute; left: 10px; top: 6px;}
#header .head_sub p a img {width:35%;}
#header .head_sub nav ul li { width:16%; display: inline-block;margin-right: 5px;}
#header .head_sub nav ul li img { width:85%; margin:6px auto 0;}	

.top .concept .inner .textbox p {font-size:1.6em;}
#header {min-height:100px;}
}

@media screen and (min-width:420px) {

#header {min-height:110px;}
}


@media screen and (max-height:414px) {
.top_ph {width:100%; height:100px; max-width:none; margin:-15% auto 0;background: url(../images/header_bg.png) no-repeat center;background-size:cover; }
}

@media screen and (min-width:568px) {
#pc {display:block;}
#sp {display:none;}

#rect { width: 45%; padding:8px 0; margin:0 auto;text-align:center;}
#rect_sub { width: 45%; padding:8px 0; margin:0 2%;text-align:left;}

#menu ul li img {  width: 70%;padding: 0; }
#sub_menu ul li img {  width: 70%;padding: 0; }

.top_ph {width:100%; height:100px; max-width:none; margin:-10% auto 0;background: url(../images/header_bg.png) no-repeat center;background-size:cover; }	
.info_list li {font-size:16px;}
.contents_btn {text-align:center;padding:0 2%;}
.contents_btn li {width:48%;min-height:330px;float:left;box-sizing:border-box;margin:2% 1% 0;padding:1%;background:rgba(255,255,255,.5); border-radius: 10px;        /* CSS3草案 */  
   -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */  
}

#top_contents01 h2 {padding: 0 0 1%;width:85%;max-width: 280px;}
#top_contents01 h6 {padding: 0 0 1%;width:85%;max-width: 230px;}
#top_contents01 h5 {padding: 0 0 1%;width:85%;max-width: 305px;}

#main .inner .guide_ttl h8 {width:100%; text-align:left;font-size:20px;padding:0 .5em .4em;position: relative;border-bottom: 4px solid #ff4531; }

.concept_box_in .left p {padding-left:5px;width:80%;}
.concept_box:after {content:"";background:url(../images/concept_bg02.png) no-repeat 0 0;background-size:cover;width:230px;height:230px;position:absolute;bottom:0;right:-20px;z-index:0;}
.concept_box_in .right img {max-width:120px; }
.concept_box_in .left img {max-width: 500px;width: 95%;float: right;margin:0 8% 2% 2%; z-index:9999 !important;}

.nozominoki ul{width: 100%;margin: 0 auto; padding:0 2%; text-align:center;}
.nozominoki li {width: 44%;padding:10px 0 2%; margin:5px 2% 0; float:left; }
.nozominoki li img {padding-bottom:10px;}

#header {min-height:155px;}
#header .head_sub {width: 100%; text-align:right; height:104px;}

#header .head_sub .head_logo {position: absolute; left: 10px; top: 5px;width:38%;}
}




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


/* メニューロゴ */

#rect { width: 35%; padding:0px; margin:10px auto 0px;text-align:center;}
#rect_sub { width: 40%; padding:0px; margin:10px 2% 0px;text-align:left;}

#menu ul{ width:100%; max-width:600px; text-align:center; margin:2% auto 3%;}
#menu ul li{float: left;width: 30%; margin:auto;}
#menu ul li img { display: inline-block; width: 76%;padding: 10px auto;}

#sub_menu ul{ width:100%; max-width:600px; text-align:right; margin:2% auto 3%;}
#sub_menu ul li{float: left;width: 25%; margin:auto;}
#sub_menu ul li img { display: inline-block; width: 80%;padding: 10px auto;}



/* スライダー */
	
    .swiper-container {
      width: 100%;
      height: 100%;}
	 .swiper-slide img {
	  width: 98%;
      height:98%;
	  margin-top:48%;
	  padding-bottom:5px;
	  z-index: 2;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
	
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
 }
 
 /* Clouds */
#clouds {
  top: 30px;
  position: relative;
  -webkit-animation: move 20s infinite linear;  
  -moz-animation: move 20s infinite linear;  
  -ms-animation: move 20s infinite linear;
}

#clouds2 {
	top: 80px;
  position: relative;
  -webkit-animation: backup 14s infinite linear;
  -moz-animation: backup 14s infinite linear;
  -ms-animation: backup 14s infinite linear;
}
	
.top_ph {width:100%; height:100px; max-width:none; margin:-8% auto 0;background: url(../images/header_bg.png) no-repeat center;background-size:cover; }

.contents_btn {text-align:center;padding:0 2%;}
.contents_btn li {width:32.3%;min-height:360px;float:left;box-sizing:border-box;margin:.5%;padding:1%;background:rgba(255,255,255,.5); border-radius: 10px;        /* CSS3草案 */  
   -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */  
}
.img-block .img-01 {width: 86%;border-radius: 50%;margin: 0 auto;border: 15px double rgba(98,128,51,.8);}
.img-block .img-02 {width: 86%;border-radius: 50%;margin: 0 auto;border: 15px double rgba(233,81,24,.8);}
.img-block .img-03 {width: 86%;border-radius: 50%;margin: 0 auto;border: 15px double rgba(77,131,186,.8);}
.img-block img:hover {
	 -webkit-transform: scale(1.05); 
    -moz-transform: scale(1.05); 
     -o-transform: scale(1.05); 
     -ms-transform: scale(1.05); 
    transform: scale(1.05); 
}
.contents_btn li p {font-size:14px;text-align:left; margin:0 auto; padding:0 1em;}

#top_contents01 h2 {padding: 0 0 1%;width:75%;max-width: 280px;}

#top_contents01 .subarea {padding:0 2.5% 2%;}

	
#header .head {width: 100%;max-width:none;top:1%; margin:auto;}




.top #info .inner {padding:0 3%;position:relative;}

#info .info_list {background:rgba(255,255,255,.8); border-radius: 20px; margin:3% auto; padding:2% 10px 5%;}
#info {padding: 30px 0 3%; margin:auto;}
.info_list ul {width: 90%; margin: 0 auto;}
.info_list li {padding: 10px 0 0 1em;text-indent:0;}
.info_list li span.date {display: inline-block;vertical-align: top;width: 7em;}
.info_list li a {padding-right: 0;display: inline-block;vertical-align: midle;}



.footer_bnr {padding: 5% 3.5%;}
.footer_area {padding: 10px 3%;max-width: 94%;}
.footer_area .logo {width: 400px;float: left; }
.footer_area .logo img {width: 70%; text-align:left; margin-left: 10px;}
.footer_area .logo p { text-align:left; margin:5px 0 5px 20px;}
.footer_area .contact {width: 140px;margin: 0;text-align: right;float: right;padding-top:20px;}


#info .inner .info_list h2 {max-width:280px;padding: 10px auto 2%;}


#main .ttl  {width:100%; height:100px; max-width:none; margin:-10% auto 3%;background: url(../images/sub_title_company.png) no-repeat center;background-size:cover; }	
#main .ttl_02  {width:100%; height:100px; max-width:none; margin:-10% auto 3%;background: url(../images/sub_title_guide.png) no-repeat center;background-size:cover; }	


#top_contents01 h6 {padding: 0 0 1%;width:70%;max-width: 250px;}
#top_contents01 h5 {padding: 0 0 1%;width:70%;max-width: 330px;}

.inner .box {width:80%; margin:1% auto;}

.leftbox {width:48%; float:left;margin-top:0;margin-right:3%;}
.rightbox {width:45%; float:left;font-size:14px;margin-top:.5%;padding:1em 0 1em 1em; line-height:1.8em;}

.message .flow {position:relative;max-width: 1024px;margin: 0 auto;}
.message .flow li  {padding: 5% 8%;}
.message .flow li.item01  {background-image:url(../images/flow_bg.png);}
.message .flow li.item02  {background-image:url(../images/flow_bg02.png);}
.message .flow li.item03  {background-image:url(../images/flow_bg03.png);}
.message .flow li.item04 {background-image:url(../images/flow_bg04.png);}


.concept_box_in .left {width:80%;}
.concept_box_in .left img {max-width: 500px;width: 70%;float: right;margin:0 8% 3% 0; z-index:9999 !important;}

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

.concept_box:before {content:"";background:url(../images/concept_bg01.png) no-repeat 0 0;background-size:cover;width:280px;height:280px;position:absolute;margin-top:-8%;left:-40px;z-index:0;}
.concept_box:after {content:"";background:url(../images/concept_bg02.png) no-repeat 0 0;background-size:cover;width:280px;height:280px;position:absolute;bottom:0;right:-20px;z-index:0;}
#top_contents01{margin:0 auto -5%;}

.goods_btn {text-align:center;padding:0 2%;}
.goods_btn li {width:32.3%;min-height:360px;float:left;box-sizing:border-box;margin:.5%;padding:1%;background:rgba(255,255,255,.5); border-radius: 10px;        /* CSS3草案 */  
   -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */  
}

.goods_btn li p {font-size:14px;text-align:left; margin:0 auto; padding:0 1em;}

.nozominoki ul{width: 100%;margin: 0 auto;}
.nozominoki li {width: 44%;padding:10px auto 10%; margin:5px 2% 0; float:left; }

#header {min-height:180px;}
#header .head_sub {width: 100%; text-align:right; height:102px;}
#header .head_sub p a {position: absolute; left: 10px; top: 6px;}
#header .head_sub p a img {width:35%;}
#header .head_sub nav ul li { width:13%; display: inline-block;margin-right: 5px;}
#header .head_sub nav ul li img { width:85%; margin:6px auto 0;}

.guide_info img {width:55%; margin:1.5em;}

#header .head_sub .head_logo {position: absolute; left: 10px; top: 5px;width:35%;}
}

@media screen and (min-width:900px) {
.concept_box:before {max-width:280px; z-index:0; margin:-6% auto 0;}
.concept_box:after {width:250px;height:250px;}
.concept_box {width:90%; margin:auto;}
.concept_box_in .left p {padding-left:40px;width:65%;}
.concept_box_in .left img {max-width: 500px;width: 70%;float: right;margin: 0 10% 3% 0; z-index:9999;}

#top_contents01{margin:0 auto -5%;}

#header {min-height:200px;}
#header .head_sub {width: 100%; text-align:right; height:110px;}
#header .head_sub p a {position: absolute; left: 15px; top: 6px;}
#header .head_sub p a img {width:40%;}
#header .head_sub nav ul li { width:12%; display: inline-block;margin-right: 15px;}
#header .head_sub nav ul li img { width:85%; margin:11px auto 0;}
.guide_info img {width:40%; margin:1.5em;}

#header .head_sub .head_logo {position: absolute; left: 10px; top: 5px;width:29%;}
}
@media screen and (min-width:1024px) {
#rect { width: 25%; padding:0px; margin:10px auto 0;text-align:center;}
#rect_sub { width: 25%; padding:0px; margin:0 2% 0;text-align:left;}

 .swiper-slide img {
	  width: 98%;
      height:98%;
	  margin-top:34%;
	  padding-bottom:5px;
    }
	
.top #info .inner {padding:0 10%;margin:0 auto; position:relative;}
#info .info_list {max-width:900px;background:rgba(255,255,255,.8); border-radius: 20px; margin:3% auto; padding:1% 2% 4%;}


#main .ttl  {width:100%; height:130px; max-width:none; margin:-3% auto 0;background: url(../images/sub_title_company.png) no-repeat center;background-size:cover; }	
#main .ttl_02  {width:100%; height:130px; max-width:none; margin:-3% auto 0;background: url(../images/sub_title_guide.png) no-repeat center;background-size:cover; }	

.message {max-width:1024px; margin:auto;}
#gallery_img {max-width:1024px; margin:auto;}
.middle_size {display:block; text-align:center; margin:5px auto 0;}

#header {min-height:150px;}
#header .head_sub {width: 100%; text-align:right; height:115px;}
#header .head_sub p a {position: absolute; left: 20px; top: 6px;}
#header .head_sub p a img {width:45%;}
#header .head_sub nav ul li { width:12%; display: inline-block;margin-right: 20px;}
#header .head_sub nav ul li img { width:85%; margin:8px auto 0;}

}

@media screen and (min-width:1025px) {
/* Clouds */
#clouds {
  top: -50px;
  position: relative;
  -webkit-animation: move 20s infinite linear;  
  -moz-animation: move 20s infinite linear;  
  -ms-animation: move 20s infinite linear;
}

#clouds2 {
  position: relative;
  -webkit-animation: backup 14s infinite linear;
  -moz-animation: backup 14s infinite linear;
  -ms-animation: backup 14s infinite linear;
}


.main_wrap {padding: 3% 0 0;}

#top_contents01{margin:2% auto -5%;}

.footer_area {padding: 10px 0 20px;max-width: 1024px;}

.footer_bnr {padding: 50px 0;}
#footer .copy {padding: 10px 0;}

#main .inner {max-width: 1080px;margin: 0 auto;}
#top_contents01 h2 {max-width: 310px;padding: 1% 0;}
#top_contents01 h6 {max-width: 280px;padding: 1% 0;}
#top_contents01 h5 {max-width: 350px;padding: 1% 0;}

#top_contents02 {max-width: 1600px;margin: 0 auto;}
#top_contents02 h2 {padding-left: 2.9%;width:250px;}

#info .inner .info_list h2  {max-width: 280px;padding: 10px auto 2%;}

.message .flow {margin: 5px 0;padding-top: 10px;}
.message .flow:before {width: 50%;}
.message .flow:after {width: 1024px;top: 7px;right: 0;margin: 0 auto;left: 0;}

.concept_box_in {padding: 0 30px 60px;}
.concept_box_in .left img {max-width: 500px;width: 70%;float: right;margin: 8% 10% 3% 0; z-index:9999;}
.concept_box:after {width:350px;height:350px;}
.concept_box:before {max-width:310px; z-index:0; margin:-3% auto 0;}
#header .head_sub .head_logo {position: absolute; left: 10px; top: 5px;width:26%;}

}
@media screen and (min-width:1200px) {

#top_contents01 h2 {max-width: 310px;padding: 0 0 1%;}
#main .ttl  {width:100%; height:150px; max-width:none; margin:-3% auto 0;background: url(../images/sub_title_company.png) no-repeat center;background-size:cover; }	
#main .ttl_02  {width:100%; height:150px; max-width:none; margin:-3% auto 0;background: url(../images/sub_title_guide.png) no-repeat center;background-size:cover; }	

#header .head_sub nav ul li { width:11%; display: inline-block;margin-right: 20px;}
}

@media screen and (min-width:1400px) {
#rect { width: 20%; padding:0px; margin:.5% auto -1%;text-align:center;}
#rect_sub { width: 20%; padding:0px; margin:0 2% -1%;text-align:left;}

.swiper-slide img {
	  width: 98%;
      height:98%;
	  margin-top:26%;
	  padding-bottom:5px;
    }
#menu ul{ width:100%; max-width:800px; text-align:center; margin:1% auto 3%;}
#menu ul li{float: left;width: 28%; margin:auto;}
#menu ul li img { display: inline-block; width: 65%;padding: 10px auto;}


.top_ph {width:100%; height:100px; max-width:none; margin:-5% auto 0;background: url(../images/header_bg.png) no-repeat center;background-size:cover; }

/* Clouds */
#clouds {
  top: -200px;
  position: relative;
  -webkit-animation: move 20s infinite linear;  
  -moz-animation: move 20s infinite linear;  
  -ms-animation: move 20s infinite linear;
}

#clouds2 {
	top: -150px;
  position: relative;
  -webkit-animation: backup 14s infinite linear;
  -moz-animation: backup 14s infinite linear;
  -ms-animation: backup 14s infinite linear;
}

#header {min-height:180px;}
#header .head_sub nav ul li { width:9.5%; display: inline-block;margin-right: 30px;}

#header .head_sub .head_logo {position: absolute; left: 10px; top: 5px;width:23%;}
}
@media screen and (min-width:1600px) {
#header .head {width:100%;max-width:none; margin:auto;}
#header .head_sub nav ul li { width:7.5%; display: inline-block;margin-right: 30px;}
#header .head_sub .head_logo {position: absolute; left: 10px; top: 5px;width:19%;}
}
@media screen and (min-width:1720px) {

}

@media only screen
    and (min-device-width:768px)
    and (max-device-width:1024px)
    and (orientation:portrait){
}