/*
Theme Name: CITYTOURS 
Theme URI: http://www.ansonika.com/countryholidays/
Author: Ansonika
Author URI: http://themeforest.net/user/Ansonika/

[Table of contents] 

1. SITE STRUCTURE and TYPOGRAPHY
- 1.1 Typography
- 1.2 Buttons
- 1.3 Structure

2. CONTENT
- 2.1 Home
- 2.1 Rooms list
- 2.2 Room details
- 2.3 About us
- 2.4 Activities
- 2.5 Contacts us
- 2.6 Fullscreen gallery
- 2.7 Error page

3. COMMON
- Tooltips
- Containers styles
- Form styles
- Tabs, collapse
- etc


/*============================================================================================*/
/* 1.  SITE STRUCTURE and TYPOGRAPHY */
/*============================================================================================*/

/*-------- Only fo the demo - menu colors bullets --------*/
i.color_1{color:#e04f67;}
i.color_2{color:#1cbbb4;}
i.color_3{color:#82ca9c;}
i.color_4{color:#f7941d;}

/*-------- Allert for old browsers IE8 and below --------*/
.chromeframe{background:#ddd;color:#000;padding: 0.2em;position: fixed; top: 0; left: 0; text-align: center; z-index:9999; width: 100%;}
.chromeframe a{color:#ed1c24;}

/*-------- 1.1 Typography --------*/
body {background:#fff; font-size:15px; line-height:28px; font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
 color:#555;-webkit-font-smoothing: antialiased;}

h1, h2, h3, h4, h5, h6{-webkit-font-smoothing:antialiased; color:#222; font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
 }
h3{ font-size:20px;}

.main_title{ text-align:center; font-size:16px; margin-bottom:30px;}
.main_title h2{ text-transform: uppercase; font-weight:700; letter-spacing:-1px; font-size:32px; margin-bottom:30px;margin-top:0; color:#006ae8; }

.main_title span{ display:block; width:40px; height:4px; background-color:#ededed; margin:auto;-webkit-border-radius: 5  px;-moz-border-radius: 5px;border-radius: 5px; margin-bottom:15px; }
.main_title p{ font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
 font-weight:300; font-size:20px}

/*General links color*/
a {color: #006ae8;text-decoration: none;-webkit-transition: all 0.2s ease;transition: all 0.2s ease; outline:none;}
a:hover,a:focus {color: #111;text-decoration: none; outline:none;}
a.link_normal{
	position:relative;
	font-weight:500;
	display:block;
	color:#6f962c;
	margin-top:10px;
}
a.link_normal:hover{
	color: #111;
}
a.link_normal:after{
	font-style: normal;
 	font-weight: normal;
 	font-family: 'fontello';
	content: "\e89b";
	top:1px;
	position:relative;
	margin-left:5px;
}

p {margin: 0 0 20px 0;}

.nopadding {
	margin: 0 !important;
	padding: 0 !important;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #ddd;
}
/*-------- 1.2 Buttons --------*/
a.btn_full, .btn_full{
	border: none;
	font-family: inherit;
	font-size: inherit;
	color:#fff;
	width:100%;
	background: #85c99d;
	cursor: pointer;
	padding: 12px 20px;
	display: inline-block;
	outline: none;
	font-size:12px;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	text-transform:uppercase;
	font-weight:bold;
	display:block;
	text-align:center;
	margin-bottom:10px;
}
a.btn_full:hover, .btn_full:hover{
	background:#333;
}

a.button_intro, .button_intro  {
	border: none;
	font-family: inherit;
	font-size: inherit;
	color:#fff !important;
	background: #e28b00;
	cursor: pointer;
	padding: 20px 25px;
	display: inline-block;
	outline: none;
	font-size:16px;
	text-align:center;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	font-weight:bold;
	min-width:150px;
	border: 1px solid #e28b00;
}
a.button_intro:hover, .button_intro:hover {
	background: #fff;
	color:#e28b00 !important;
	border: 1px solid #e28b00;
}
a.button_intro.outilne, .button_intro.outline  {
	color:#fff;
	background: #006ae8;
	padding: 20px 25px;
	border: 1px solid #006ae8;
}
a.button_intro:hover, .button_intro:hover {
	background: #fff;
	color:#006ae8;
}
a.outline:hover {
	background: #fff;
	color:#006ae8 !important;
	border: 1px solid #006ae8;
}

a.btn_1, .btn_1{
	border: none;
	font-family: inherit;
	font-size: inherit;
	color:#fff;
	background: #006ae8;
	cursor: pointer;
	padding: 10px 30px;
	display: inline-block;
	outline: none;
	font-size:14px;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	font-weight:bold;
}

a.btn_1.white, .btn_1.white  {background: #fff; color:#86b535;}
a.btn_1.white:hover, .btn_1.white a:hover, .btn_1.white:hover  {background: #333; color:#fff !important;}

a.btn_1.outline,.btn_1.outiline, input .btn_1.outiline{
	color:#555;
	background: none;
	border:2px solid #555;
	padding: 5px 18px;
}
a.btn_1.outline:hover,.btn_1.outiline:hover, input .btn_1.outiline:hover{
	color:#fff;
	background:#86b535;
	border:2px solid #86b535;
}

a.btn_1.medium, .btn_1.medium  {
	padding: 10px 25px;
	font-size:14px;
}
a.btn_1:hover, .btn_1:hover {
	background: #333;
}

/*Header*/
#top_header{
	background-color:#fff;
	-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
	box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
	width:100%;
	position:fixed;
	z-index:99999;
	margin:auto;
}
#top_header .container{padding:0;}
#top_phone{ font-size:14px;}
#logo{ margin:8px 0 8px 15px;}


header.sticky #top_links {  display:none;}
header.sticky #top_line {height: 0;overflow:hidden; padding:0; opacity:1;}
header.sticky #top_header{width:100%;position:fixed; top:0; left:0; padding:0; margin:0;}

nav{margin-top:20px; }

#top_line{
	color:#fff;
	height:28px;
	 font-size:11px;
	 visibility:visible;
	 opacity:1;
	 position:relative;
	 z-index:999999;
}
ul#top_links{
	list-style:none;
	margin:0;
	padding:0;
	float:right;
	text-transform:uppercase;
	background: rgba(255,255,255,0.5);
}
ul#top_links li{
	display:inline-block;
	border-left: 1px solid rgba(0,0,0,0.1);
	margin-right:7px;
	padding-left:8px;
}
ul#top_links li:first-child{
	border-left: none;
}
ul#top_links a{
	color:#444;
}
a#link_bt{
	float:right;
	background: rgba(255,255,255,0.5);
	color:#444;
	margin-right:10px;
	padding:0 8px;
	display:inline-block;
}
a#link_bt:hover{
	background: rgba(0,0,0,0.5);
	color:#fff;
}
/* Footer  */
footer {
	background:#006ae8;
	padding:30px 0 30px 0;
	color:#fff;
	margin-bottom: 20px;
}
footer h3{
	font-size:16px;
	font-weight:700;
	color:#fff;
}
footer a{
	color: #FF9;
}
footer a:hover{
}
footer ul{
	margin:0;
	padding: 0 0 20px 0;
	list-style:none;
}
#social_footer{
	text-align:center;
	padding-top:30px;
	margin-top:30px;
}
#social_footer p{
	color:#fff;
}
#social_footer ul{
	margin:0;
	padding:0 0 10px 0;
	text-align:center;
}
#social_footer ul li{
	display:inline-block;
	margin:0 5px 10px 5px;
}
#social_footer ul li a{
	color:#fff;
	text-align:center;
	border:2px solid #FFF;
	line-height:34px;
	display:block;
	font-size:16px;
	width:35px;
	height:35px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}
#social_footer ul li a:hover{
	background:#fff;
	color:#86b535;
}
ul#contact_details_footer{
	list-style:none;
	margin:0 0 20px 0;
	padding:0;
}
ul#contact_details_footer li{
	margin-bottom:10px;
}
input#email_newsletter_2.form-control{
	border:none;
	 -webkit-box-shadow: none;
     box-shadow: none;
 	 -webkit-transition: none;
}

/*============================================================================================*/
/* 2.  CONTENT  */
/*============================================================================================*/

/*-------- Home --------*/
.box_home{
	padding:25px 25px 5px 25px;
	position:relative;
	text-align:center;
}
.box_home h3{
	font-size:20px;
}
.box_home i{
	font-size:60px;
	color:#86b535;
}
.price_home{
	float:right;
}
.price_home em{
	font-style:normal;
	font-weight:normal;
	color:#666;
	margin-left:4px;
	font-size:13px;
}
.img_zoom {
	overflow:hidden;
	text-align:center;
	margin-top:20px;
	border:5px solid#fff;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
}
.img_zoom a img{
	-webkit-transform:scale(1.2);
	transform:scale(1.2);
	-webkit-transition: all 0.7s ease;
	transition: all 0.7s ease;
}
.img_zoom a:hover img{
	-webkit-transform:scale(1);
	transform:scale(1);
}
.features-bg {
    position: relative;
    min-height: 400px;
    background: url(../img/features-intro-01.jpg) no-repeat center center;
    background-size: cover;
}
.features-img {
    width: 100%;
    height: 400px;
    text-align: center;
    line-height: 400px;
}
.features-content {
    position: relative;
    padding: 11% 100px 10% 100px;
    height: 400px;
    background-color: #f9f9f9;
	font-size:13px;
}
.features-content h3{
   font-family: "Gochi Hand", cursive;
   font-size:32px;
   line-height:34px;
   text-transform:uppercase;
}

#strip_activities ul{
	list-style:none;
	padding:0 0 20px 0;
	margin:0;
}
#strip_activities ul li{
	position:relative;
	min-height:115px;
	padding:5px 0 10px 150px;
	margin-bottom:20px;
}
#strip_activities ul li:last-child{
	margin-bottom:0;
}
#strip_activities ul li img{
	position:absolute;
	left:0;
	top:0;
}
.general_facilities{
	position:relative;
	padding-left:70px;
}
.general_facilities i{
	position:absolute;
	left:0;
	top:0;
	font-size:40px;
}
.intro_title_booking {
	margin-top:150px;
}
.intro_title_booking h1 {
    font-size: 42px;
	margin-bottom:5px;
	color:#fff;
	font-weight:bold;
	text-transform:uppercase;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
.intro_title_booking p {
	text-transform:uppercase;
}
#booking_container {
    position: relative;
    height: 650px;
	padding-top:130px;
    background: #ccc url(../img/slide_hero.jpg) no-repeat center top;
    background-size: cover;
    color:#fff;
	width: 100%;
	z-index:99;
}
#book {
	background: rgba(0, 0, 0, 0.6);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000, endColorstr=#7f000000);
	/* Explorer 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000, endColorstr=#7f000000)";
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding:15px;
	padding-bottom:5px;
	position:relative;
	border:1px solid #111;
	-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
}
#book .loader, #book_in .loader{
	position:absolute;
	right:10px;
	bottom:12px;
}
.error_message { margin:0 0 5px 0; padding:0;color: #C33; display:inline-block; font-weight:600;}
#book .error_message { color: #FF9;}

.header-video {
  position: relative;
  overflow: hidden;
  background: #4d536d url(../img/bg_video_fallback.jpg) no-repeat top center;
  background-size: cover;
}
#hero_video {
	position: relative;
    background-size: cover;
    color:#fff;
	width: 100%;
	font-size:16px;
	display:table;
	height:100%;
	z-index:99;
	text-align:center;
	text-transform:uppercase;
	padding-top:60px;
}
#hero_video a.video{display:none;}
iframe, video {
  
}
iframe {
  height: 100%;
  width: 100%;
}
video {
  width: 100%;
}
.teaser-video {
  width: 100%;
  height: auto; 
}
.header-video--media {
  width: 100%;
  height: auto;
}
.intro_title{
	display:table-cell;
	vertical-align:middle;
	padding-bottom:60px;
}
.intro_title h1 {
    font-size: 45px;
	margin-bottom:5px;
	color:#fff;
	font-weight:bold;
	text-transform:uppercase;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

/*-------- 2.1 Rooms list --------*/
.strip_all_rooms_list{
	margin-bottom:30px;
	background-color:#fff;
	padding:3px;
	display: block;
	color:#777;
	box-shadow: inset 0 0 0 1px #e0e5e9;
	border:5px solid #fbfbfc;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.img_list{
	overflow:hidden;
	min-height:220px;
	text-align:center;
	position:relative;
}
.img_list img{
	width:auto;
	height:220px;
	position:absolute;
	left:-10%;
}
.img_list a img{
	-webkit-transform:scale(1.2);
	transform:scale(1.2);
	-webkit-transition: all 0.7s ease;
	transition: all 0.7s ease;
}
.img_list a:hover img{
	-webkit-transform:scale(1);
	transform:scale(1);
}
.price_list .button{
	display:block;
}
.rooms_list_desc{
	padding:15px 20px 0 0;
	border-right: 1px solid #ededed;
	height:220px;
}
.rooms_list_desc h3{
	
}
.price_list{
	display:table;
	height:220px;
	font-size:38px;
	color:#e74c3c;
	width:100%;
	margin-left:-15px;
}
.price_list small{
	font-size:11px;
	color:#999;
	display:block;
	margin-bottom:10px;
	line-height:12px;
}
.price_list div{
	display: table-cell;
	vertical-align:middle;
	text-align:center;
}
.price_list p{
	padding:0;
	margin:0;
}
.price_list .normal_price_list{
	display:block;
	text-decoration:line-through;
	color:#999;
	font-size:20px;
	margin-top:10px;
}
.price_list sup{
	font-size:22px;
	position:relative;
	top:-10px;
}
ul.add_info{
	list-style:none;
	padding:0;
	margin:0;
}
ul.add_info li{
	display:inline-block;
	margin-right:5px;
	border:1px solid #ededed;
	text-align:center;
	width:35px;
	height:35px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
ul.add_info li a{
	color:#555;
	width:35px;
	height:35px;
	display:block;
}
ul.add_info li i{
	display:inline-block;
	font-size:22px;
	top:6px;
	position:relative;
}
/*-------- 2.2 Room details --------*/
#single_room_feat ul{
	list-style:none;
	padding:0;
	margin:25px 0 0 0;
	display:table;
	border-bottom:1px solid #ededed;
	margin-bottom:30px;
}
#single_room_feat ul li{
	display:table-cell;
    width:1%;
	vertical-align:middle;
	text-align:center;
	padding: 0 10px 20px 10px;
	white-space:nowrap;
}
#single_room_feat ul li:last-child{
	margin-right:0;
}
#single_room_feat ul li i{
	font-size:36px;
	display:block;
	margin-bottom:10px;
}
#single_tour_desc h3{
	font-size:22px;
	margin-top:5px;
}
#single_tour_desc h4{
	line-height:20px;
	font-size:18px;
}
#score{
	float:right;
	font-size:11px;
	margin-top:5px;
}
#score_detail span{
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	display: inline-block;;
	width:45px;
	height:45px;
	border:2px solid #555;
	line-height:42px;
	font-size:14px;
	font-weight:bold;
	color:#555;
	margin-right:5px;
	text-align:center;
}
#score_detail{
	font-size:14px;
	margin-bottom:15px;
}
#score_detail small{
	color:#999;
}
#rating_summary ul{
	list-style:none;
	margin:0 0 -5px 0;
	padding:0;
}
#rating_summary ul li{
	margin-bottom:5px;
}
#rating_summary ul li .rating{
	display:inline-block;
	font-size:14px;
	float:right;
}
.review_strip_single{
	position:relative;
	padding:30px 0 20px 0;
	margin:30px 0 25px 0;
	border-bottom:1px solid #ddd;
}
.review_strip_single.last{
	margin-bottom:0;
	border-bottom:0;
}
.review_strip_single img{
	top:-15px;
	position:absolute;
	left:0;
	border:4px solid #fff;
}
.review_strip_single h4{
	font-size:18px;
	margin:-12px 0 35px 90px;
	padding:0;
}
.review_strip_single small{
	float:right;
	font-size:12px;
	margin-top:-10px;
	font-style:italic;
}
.review_strip_single .rating{
	font-size:16px;
}
.rating{color:#F90;}
#Img_carousel .sp-selected-thumbnail {border: 2px solid #86b535;}

/*-------- 2.3 About us --------*/
#intro{
	text-align:center;
} 
#intro h2{
	text-transform:uppercase;
	font-weight:700;
	margin-top:0;
} 
#intro p{
	font-size:20px;
	line-height:24px;
} 
ul.feat#about{
	list-style:none;
	margin: 20px 0 20px 0;
	padding:0;
}
ul.feat#about li{
	margin-bottom:20px;
	padding:15px 20px 0px 75px;
	border:1px solid #ededed;
	position:relative;
}
ul.feat#about li h4{
	color:#629976;
}
ul.feat#about li i{
	position:absolute;
	left:10px;
	top:20px;
	font-size:40px;
	color:#629976;
}
#testimonials {
	background: #fafafa;
	padding:30px 0;
	margin-bottom:60px;
}
/* carousel */
#quote-carousel {
  padding: 0 10px 40px 10px;
}
#quote-carousel small{
	color:#999;
}
/* Previous button  */
#quote-carousel .carousel-control.left {
  left: -12px;
}
/* Next button  */
#quote-carousel .carousel-control.right {
  right: -12px !important;
}
#quote-carousel .carousel-indicators {
  right: 50%;
  top: auto;
  bottom: 0px;
  margin-right: -19px;
}
#quote-carousel .carousel-indicators li {
  background: #ccc;
  border:none;
}
#quote-carousel .carousel-indicators .active {
  background: #1c1c1c;
}
#quote-carousel img{
  width: 100px;
  height: 100px;
  border:3px solid #fff;
}
.item blockquote {
    border-left: none; 
    margin: 0;
	text-align:center;
	font-family: 'Gochi Hand', cursive;
	font-size:24px;
	line-height:28px;
}
.item blockquote img {
    margin-bottom: 20px;
}

/*-------- 2.4 About us --------*/
.box_cat_wp h2{ background:#86b535;margin:0;line-height:32px;font-style:normal;font-weight:700; line-height:32px;padding-left:8px;text-transform:uppercase;font-size:15px;text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);border-top:1px solid #fff;
margin-right:2px;border-bottom:1px solid #fff;margin-bottom:0;}
.box_cat_wp a h2 {color:#fff;}
.box_cat_wp p{ padding:10px 15px 0px 15px; line-height:20px;}
.box_cat_wp a p, .box_cat_wp a:hover p{ color:#363636}
.box_cat_bt { display:inline-block; background:#8dc63f; color:#fff; font-weight:bold; padding:5px 8px; margin-left:15px; -webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px; -webkit-font-smoothing: antialiased !important;}
.box_cat_wp{border:5px solid #fbfbfc;width:100%; height:248px; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;	margin-bottom:10px;}		
.box_cat {cursor:pointer;position:relative;overflow:hidden;width: 100%;height:238px;border:1px solid #e0e5e9;}
.cat-img {display:none;position:absolute;top:0;background:#fff;height:240px;width:100%;text-align:center;border:1px solid #fff;}
.cat-hover .cat-overlay {bottom:-202px;height:236px;}
.cat-img img{height:auto;width:100%;}
.cat-overlay {display:none;z-index:5;margin:0 1px; position:absolute;width:100%;height:235px;background: rgb(255, 255, 255); /* The Fallback */background: rgba(255, 255, 255, 0.9); }

/*-------- 2.5 Contacts us --------*/
#map {
	width:100%;
	height:550px;
}
#map_decor {
	background: url(../img/pattern_3.png) repeat-x center bottom;
	height:50px;
	width:100%;
	position:absolute;
	top:-50px;
	left:0;
	z-index:9;
}
/* Retina version */
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
	#map_decor {background:url(../img/pattern_3_2x.png) repeat-x center bottom;background-size:996px 50px;}
}

/*-------- 2.6 Fullscreen gallery --------*/
#close, .nav-gal { position:absolute; height:39px; width:39px; opacity:0.6; right:10px; }
#close { top:10px; background:url('../img/close_gallery.png'); }
.nav-gal { top:55px; background:url('../img/gallery_thumb.png'); }
#close:hover, .nav-gal:hover { cursor:pointer; opacity:1;}

/*-------- 2.7 Error page --------*/   
.intro_title.error  h1{
	font-size: 130px;
}
/*============================================================================================*/
/* 3.  COMMON  */
/*============================================================================================*/
.bg_gray{
	background-color:#f9f9f9; 
	padding:30px 0 20px 0;
	border-top: 1px solid #f0f0f0;
	border-bottom: 1px solid #f0f0f0;
}
#general_facilities ul{
	list-style:none;
	padding:0 0 20px 0;
	margin:0;
	line-height:34px;
}
#general_facilities ul li i{
	font-size:22px;
	float:left;
	margin:0 10px 0 0;
}

/* White leaf border */      
#general_decor{
	position:absolute;
	bottom:0;
	left:0;
	background: url(../img/pattern_3.png) repeat-x 0 0;
	z-index:9999;
	width:100%;
	height:45px;
}
/* Retina version */
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
	#general_decor {background:url(../img/pattern_3_2x.png) repeat-x 0 0;background-size:996px 50px;}
}

/* Scroll top button */      
#toTop {
	width:40px; 
	height:40px;
	background-color:rgba(0, 0, 0, 0.6);
	text-align:center;
	padding:10px;
	line-height:20px;
	position:fixed;
	bottom:10px;
	right:10px;
	cursor:pointer;
	display:none;
	color:#fff;
	font-size:20px;
}
#toTop:before{
	font-style: normal;
  font-weight: normal;
  font-family: "fontello";
  content: "\e899";
}

/** Quantity incrementer input==================== **/   
.qty-buttons{ position:relative; width:110px; height:34px;  }
input.qty { width:80px;border-left:0; border-right:0; padding-left:52px  }
input.qtyminus, input.qtyplus, input.qtyplus:focus {position:absolute; width:35px; height:34px; 	border: 1px solid #cccccc;  outline:none; cursor:pointer;-webkit-box-shadow: none;box-shadow: none;-webkit-transition: none; z-index:9 }
input.qtyplus {
	background:#fff url(../img/plus.png) no-repeat center center; 
	right:0; top:0; 
	text-indent:-9999px;  
	-webkit-border-top-right-radius: 4px;
     -webkit-border-bottom-right-radius: 4px;
	-moz-border-radius-topright: 4px;
	-moz-border-radius-bottomright: 4px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	border-left: 1px solid #cccccc;
}
input.qtyminus {
	background:#fff url(../img/minus.png) no-repeat center center;
	text-indent:-9999px;
	-webkit-border-top-left-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	-moz-border-radius-topleft: 4px;
	-moz-border-radius-bottomleft: 4px;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	left:0; top:0; 
	border-right: 1px solid #cccccc;
}

/*Banner*/
#banner{
	text-align:center;
	background:url(../img/grass_frame.jpg);
	background-size: 100% 100%;
	min-height:200px;
}
#banner h3 span{
	display:block;
}
#banner h3{
	padding-top:75px;
	font-size:15px;
}
#banner h3 span{
	font-size:35px;
	font-weight:bold;
	color:#92278f;
}
a.box_style_1.weahter{
	padding:20px 20px 20px 15px;
	font-size:15px;
	text-transform:uppercase;
	line-height:20px;
	display:block !important;
}
a.box_style_1.weahter i{
	font-size:28px;
	float:left;
	margin-right:10px;
	margin-top:-5px;
}

/*Spacing*/
.add_bottom_15 {margin-bottom:15px;}
.add_bottom_30 {margin-bottom:30px;}
.add_bottom_45 {margin-bottom:45px;}
.add_bottom_60 {margin-bottom:60px;}
.padd_bottom_20 {padding-bottom:20px !important;}

/** Img frame in general page **/   
.img-responsive.styled{
	margin-top:20px;
	border:5px solid#fff;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
}
.img-circle.styled{
	border:5px solid#fff;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
}
/*List*/
ul.list_ok {
	list-style:none;
	margin: 0 0 20px 0;
	padding:0;
	line-height:22px;
}
ul.list_ok li {
	position:relative;
	padding-left:25px;
}
ul.list_ok li:before {
 font-style: normal;
  font-weight: bold;
  font-family: "icon_set_1";
  font-size:14px;
  content: "\6c";
  color:#86b535;
  position:absolute;
  left:0;
  top:0;
}
/* Margin tools */
.margin_60 {padding-top:30px; padding-bottom:60px;}
.margin_30 {margin-top:30px; margin-bottom:30px;}

.form-group{ position:relative}
.input-icon{position:absolute; right:6px; top:30px; width:28px; height:24px; background-color:#fff; text-align:right;}
.input-icon i { color:#999; font-size:14px; line-height:24px;}

/* Input form style */   
.form-control {
  font-size: 12px;
  color: #333;
  height:34px;
  border-radius: 3px;
}

/* Parallax bg */
.sub_header {
    min-height: 470px;
	position:relative;
	  background-color:#fff;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    overflow:hidden;
    background-attachment: scroll;
}
.sub_header#bg_general{
	background-image:url(../img/header_bg.jpg);
}
.sub_header#bg_room{
	background-image: url(../img/room_bg.jpg);
}
.sub_header_content{
   display: table;
   width:100%;
   height:470px;
}
/* Retina version */
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
.sub_header_content{ }
}
.sub_header_content > div{
  display: table-cell;
  padding:0 15%;
   vertical-align: middle;
	text-align:center;
	color:#fff;
	font-size:16px;
}
.sub_header_content div h1, .sub_header_content div h3{
	font-size:40px;
	font-weight:bold;
	color:#fff;
}
.sub_header_content div h1{
	margin-bottom:0;
	padding-top:36px;
}
.sub_header_content div h1:before,.sub_header_content div h1:after {
	display: inline-block;
    width: 50px;
    height: 1px;
    content: '';
    vertical-align: middle;
    background: rgba(255,255,255,0.5);
}
.sub_header_content div h1:before{
    margin-right: 10px;
}
.sub_header_content div h1:after {
    margin-left: 10px;
}
.sub_header_content div a i{
	color:#fff;
	opacity:0.5;
	font-size:72px;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.sub_header_content div a:hover i{
	opacity:1;
}
/* Position  breadcrumbs */
#position {
	font-size:11px;
	position:relative;
	padding-top:20px;
	position:relative;
}
#position ul li:first-child{
	padding-left:20px;
}
#position ul li:first-child:before{
	content:"\eaf4";
	font-style: normal;
    font-weight: normal;
    font-family: "fontello";
    position:absolute;
    left:0;
    top:1px;
    color:#999;
}
#position ul{
	margin:0;
	padding:0;
	color:#888;
}

#position ul li{
	display:inline-block;
	padding-right:8px;
	margin-right:3px;
	position:relative;
}
#position ul li:after{
  content:"\e9ee";
  font-style: normal;
  font-weight: normal;
  font-family: "fontello";
  position:absolute;
  right:0;
  top:1px;
}
#position ul li:last-child:after{
	content:'';
}
.box_style_1, .box_style_2{
	padding:20px 10px 5px 10px;
	box-shadow: inset 0 0 0 1px #e0e5e9;
	border:5px solid #fbfbfc;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin-bottom:30px;
	font-size:15px;
	line-height:22px;
	background-color:#fff;
}
.box_style_2{
	text-align:center;
	padding-bottom:20px;
}
.box_style_2 a.phone{
	font-size:26px;
	display:block;
	margin-bottom:20px;
}
.box_style_1 h3{
	margin:0 0 20px 0;
	font-size:18px;
	padding-bottom:10px;
	border-bottom: 1px solid #e0e5e9;
}
.box_style_2 i{
	font-size:52px;
	margin-top:10px;
	display:inline-block;
}
.modal-dialog {
	 margin-top:110px;
}
/** Pagination **/   
.pagination > li > a,
.pagination > li > span {
  color: #888;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  color:#333 !important;
  background-color: #f9f9f9;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  background-color: #555;
  border-color: #555;
}

/** Collapse **/   
.panel {
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow:none;
}
.panel-title a {display:block; color:#629976;}
.panel-default > .panel-heading {
  background-color: #f9f9f9;
}
.panel-heading {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.panel-group .panel {
  border-radius: 0;
}

.loader {margin-left:5px; position:absolute;}

/** Blockquote **/   
blockquote.styled{
	font-family: 'Gochi Hand', cursive;
	 line-height: 1.42857143;
}

/** tabs **/   
.tab-content{
	padding:30px; 
	background-color:#fff; 
	border:1px solid #ddd; 
	border-top:none; 
	margin-bottom:25px;
	-webkit-border-bottom-right-radius: 3px;
	-webkit-border-bottom-left-radius: 3px;
	-moz-border-radius-bottomright: 3px;
	-moz-border-radius-bottomleft: 3px;
	border-bottom-right-radius: 3px;
	border-bottom-left-radius: 3px;
}
/*Preloading*/
#preloader {
	position: fixed;
	top:0;
	left:0;
	right:0;
	width:100%;
	height:100%;
	bottom:0;
	background-color:#fff; 
	z-index:999999; 
}
.sk-spinner-wave.sk-spinner {
  margin:-15px 0 0 -25px; 
  position:absolute;
  left:50%; 
  top:50%;
  width: 50px;
  height: 30px;
  text-align: center;
  font-size: 10px;
 }
 .ie8 .sk-spinner-wave.sk-spinner {display:none;}
.sk-spinner-wave div {
  background-color: #ccc;
  height: 100%;
  width: 6px;
  display: inline-block;
  -webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
   animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
}
.sk-spinner-wave .sk-rect2 {-webkit-animation-delay: -1.1s;animation-delay: -1.1s;}
.sk-spinner-wave .sk-rect3 {-webkit-animation-delay: -1s;animation-delay: -1s; }
.sk-spinner-wave .sk-rect4 {-webkit-animation-delay: -0.9s;animation-delay: -0.9s;}
.sk-spinner-wave .sk-rect5 { -webkit-animation-delay: -0.8s;animation-delay: -0.8s;}

@-webkit-keyframes sk-waveStretchDelay {
  0%, 40%, 100% {-webkit-transform: scaleY(0.4);transform: scaleY(0.4);}

  20% { -webkit-transform: scaleY(1);transform: scaleY(1);}
}
@keyframes sk-waveStretchDelay {
  0%, 40%, 100% {-webkit-transform: scaleY(0.4);transform: scaleY(0.4);}
  20% { -webkit-transform: scaleY(1);transform: scaleY(1);}
}
.flex{
    display: flex;
    flex-wrap: wrap;
}
.responsive-img{
	max-width: 100%;
    height: auto;
}
.detail-image{
	max-width: 100%;
    height: auto;
}

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

a{
   word-break: break-all;
}
@media (max-width: 767px) {
	.table{
	font-size: 12px;
}
	}
.table th{
	white-space: nowrap;
}
.memo-box {
    background: #FFFFDD;
    border: solid 1px #DDDDDD;
    width: 100%;
    padding: 15px;
    margin-left: 0px;
}
.box001{
	background-color: #006ae8;
	color: white;
	padding: 5px 10px;
	width: 100%;
}
.box002{
	float: right;
}
.box002 a{
	color: white;
}
.box002 a:hover{
	color: #FFA006;
}
.box003{
	color: #006ae8;
	border-bottom: 2px #adadad solid;
	font-size: 30px;
	font-weight: bold;
	padding-bottom: 8px;
	margin-bottom: 25px;
	line-height: 40px;
}
@media (max-width: 767px) {
	.box003{
	color: #006ae8;
	border-bottom: 2px #adadad solid;
	font-size: 22px;
	font-weight: bold;
	padding-bottom: 8px;
	margin-bottom: 25px;
		line-height: 30px;
}
	}
.box004{
	background-color: #e28b00;
	color: white;
	padding: 5px 20px;
	display: inline-block;
	font-size: 23px;
}
.box005 {
	font-size: 14px;
	line-height: 25px;
}
.box005 h4 {
	font-size: 16px;
	line-height: 25px;
	font-weight: bold;
}
.box005 img{
	margin-bottom: 15px;
}
.box006{
	text-align: center;
	font-size: 11px;
	margin-bottom: 10px;
}
.box007 {
	font-size: 14px;
	line-height: 25px;
	text-align: center;
	margin-bottom: 20px;
}
.box008{
	background-image:url(../img/12.jpg);
}
.box009{
	font-size: 12px;
}
.box010{
	color: #e28b00;
	border-bottom: 1px #adadad solid;
	font-size: 25px;
	font-weight: bold;
	padding-bottom: 8px;
	margin-bottom: 25px;
	line-height: 35px;
}
@media (max-width: 767px) {
	.box010{
	color: #e28b00;
	border-bottom: 1px #adadad solid;
	font-size: 20px;
	font-weight: bold;
	padding-bottom: 8px;
	margin-bottom: 25px;
		line-height: 28px;
}
	}
.box011{
	font-size: 17px;
	color: red;
	line-height: 26px;
}
.box012{
	background-image:url(../img/13.jpg);
}
.box013{
	background-image:url(../img/14.jpg);
}
.box014{
	background-image:url(../img/15.jpg);
}
.box015{
	background-image:url(../img/16.jpg);
}
.box016{
	background-image:url(../img/17.jpg);
}
.box017{
	background-image:url(../img/18.jpg);
}
.box018{
	background-image:url(../img/19.jpg);
}
.box019{
  position: relative;
  display: inline-block;
  margin: 3em 0 0 0;
  padding: 8px 8px;
  min-width: 120px;
  max-width: 100%;
  font-size: 26px;
  font-weight:bold;
}

@media (max-width: 767px) {
.box019{
  position: relative;
  display: inline-block;
  margin: 1em 0 0 0;
  padding: 2px 2px;
  min-width: 120px;
  max-width: 96%;
  font-size: 24px;
  font-weight:bold;
}
}

.box020{
  padding: 1em 2.5em 0 2.5em;/*文字まわり（上下左右）の余白*/
}

.box021{
  text-align: center;
  padding: 1em 0 0 0;/*文字まわり（上下左右）の余白*/
}

.box022{
  text-align: center;
}

.box023 {
    color: #232323;
    background: #fff8e8;

}
.box023 p {
    margin: 0; 
    padding: 0;
}

.box024{
  position: relative;
  display: inline-block;
  margin: 1em 0 0 0;
  padding: 8px 8px;
  min-width: 120px;
  max-width: 100%;
  font-size: 26px;
  font-weight:bold;
}

.box025{
  font-size: 24px;
  font-weight:bold;
  background: #fff0c6; /*背景色*/
  margin: 1em 4em 1em 4em;
  padding: 0.5em;/*文字周りの余白*/
  color: #555555;/*文字を白に*/
  border-radius: 1em;/*角の丸み*/
}

.box026 {
    padding: 8px 19px;
    margin: 2em 0;
    color: #232323;
    background: #fff8e8;

}

.box027{
  padding: 1em 0 0 0;/*文字まわり（上下左右）の余白*/
  font-size: 14px;
}

.box028{
  padding: 1em 0 0 0;/*文字まわり（上下左右）の余白*/
  font-size: 14px;
 display: flex;
    justify-content: center;
    align-items: center;
	min-height: 75vh;
}

@media (max-width: 767px) {
.box028{
  padding: 0 0 0 0;/*文字まわり（上下左右）の余白*/
  font-size: 14px;
 display: flex;
    justify-content: center;
    align-items: center;
	min-height: 30vh;
}
  }


@media (max-width: 767px) {
.box020{
  padding: 1em 0 0 0;/*文字まわり（上下左右）の余白*/
}
.box021{
  text-align: center;
}
.box022{
  text-align: center;
}
.box025 {
  font-size: 20px;
  font-weight:bold;
  background: #fff0c6; /*背景色*/
  margin: 0.5em 1em 1em 0.5em;
  padding: 1em;/*文字周りの余白*/
  color: #555555;/*文字を白に*/
  border-radius: 2em;/*角の丸み*/
}
.box027{
  padding: 1em 0 0 0;/*文字まわり（上下左右）の余白*/
}
  }

.boxo01{
	background-image:url(../img/o01.jpg);
}

.boxback{
  background:#89CFFD
}
.boxback2{
  margin-bottom: 10px;
  background-image: url(../img/waku.png);
  background-size: 2%;
}
.boxback3{
  background:#FF884B
}
.boxback4{
  background:#FF577F
}

.boxback5{
  background:#fffcc2
}

.boxback6{
  background:#d79279
}

.boxback7{
  margin-bottom: 10px;
  background-image: url(../img/waku2.png);
  background-size: 2%;
}

.container2{
  width: 100%;
  max-width: 960px;
  margin-right: auto;
  margin-left: auto;
}

.container3{
  width: 100%;
  max-width: 860px;
  margin-right: auto;
  margin-left: auto;
}

.container24{
  width: 100%;
  max-width: 860px;
  margin-right: auto;
  margin-left: auto;
}

.btn--orange,
a.btn--orange {
  color: #fff;
  background-color: #eb6100;
}
.btn--orange:hover,
a.btn--orange:hover {
  color: #fff;
  background: #f56500;
}

.btn,
a.btn,
button.btn {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

a.btn-flat {
  overflow: hidden;
  padding: 1.5rem 6rem;
  color: #fff;
  border-radius: 0;
  background: #000;
}

a.btn-flat span {
  position: relative;
}

a.btn-flat:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: translateX(-96%);
  transform: translateX(-96%);
  background: #eb6877;
}

a.btn-flat:hover:before {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}

.button-flat-container,
.button-flat-container2 {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  background: #f9f9f9;
  z-index: 999;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);

  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.button-flat-container.is-show,
.button-flat-container2.is-show {
  transform: translateY(0);
}

a.btn-flat2 {
  padding: 1rem 0.5rem;
  color: #fff;
  background: #0073e6; /* 鮮やかなブルー */
  width: 48%;
  text-align: center;
  text-decoration: none;
  font-size: 1rem;
  border: none;
  border-radius: 6px;
  transition: background-color 0.2s;
}

a.btn-flat2:hover {
  background: #005bb5; /* 濃いブルーに変化 */
}

button.btn-flat2 {
  padding: 1rem 0.5rem;
  color: #fff;
  background: #0073e6; /* 鮮やかなブルー */
  width: 48%;
  text-align: center;
  text-decoration: none;
  font-size: 1rem;
  border: none;
  border-radius: 6px;
  transition: background-color 0.2s;
}

button.btn-flat2:hover {
  background: #005bb5; /* 濃いブルーに変化 */
}

a.btn-flat3 {
  width: calc(25% - 0.375rem); /* gapを考慮した幅。0.5remのgap × 3 = 1.5rem → ÷4 = 0.375remずつ */
  padding: 1rem 0.5rem;
  color: #fff;
  background: #0073e6;
  text-align: center;
  text-decoration: none;
  font-size: 1rem;
  border: none;
  border-radius: 6px;
  transition: background-color 0.2s;
  box-sizing: border-box;

  display: flex;                /* 中央揃えのためにflex化 */
  align-items: center;          /* 垂直方向の中央揃え */
  justify-content: center;      /* 水平方向の中央揃え */
  text-align: center;           /* テキスト行の中央揃え */
}

a.btn-flat3:hover {
  background: #005bb5;
}

a.btn-flat4 {
  padding: 1rem 0.5rem;
  color: #fff;
  background: #0073e6; /* 鮮やかなブルー */
  width: 100%;
  text-align: center;
  text-decoration: none;
  font-size: 1rem;
  border: none;
  border-radius: 6px;
  transition: background-color 0.2s;
}

a.btn-flat4:hover {
  background: #005bb5; /* 濃いブルーに変化 */
}

a.btn-flat5 {
  padding: 1rem 0.5rem;
  color: #fff;
  background: #ffa905; /* 鮮やかなブルー */
  width: 48%;
  text-align: center;
  text-decoration: none;
  font-size: 1rem;
  border: none;
  border-radius: 6px;
  transition: background-color 0.2s;
}

a.btn-flat5:hover {
  background: #ce8c02; /* 濃いブルーに変化 */
}



.starter{
	color: #ffffff;
  font-size: 1.8rem;
  font-weight: 700;
background: #0d0d0d;/*背景色*/
padding: 0.8em;/*文字まわり（上下左右）の余白*/
border-left: solid 5px #7db4e6;
font-weight:bold;
text-align: center;
}

#center_Box{
    max-width: 100%;
    height: auto;
	text-align: center;
}

a.logout-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff; /* 青色の背景 */
  color: #fff; /* 白色のテキスト */
  text-decoration: none;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

a.logout-button:hover {
  background-color: #0056b3; /* ボタンのホバースタイル */
}

img.img-responsive2 { max-width: 100%; height: auto; }

img.img-responsive3 { max-width: 600px; height: auto; }

@media (max-width: 767px) {
    img.img-responsive3{
      max-width: 100%;
      height: auto;
    }
  }

table17 .td{
	text-align:center;
	size:10px;
}

.brown-line {
            border-bottom: 4px solid #8B4513; /* #8B4513 は茶色の色コード */
            width: 100px; /* ラインの幅を調整 */
            margin: 0 auto; /* 画面中央に配置するためのマージン指定 */
            margin-top: 20px; /* 適宜マージンを調整 */
            border-radius: 10px; /* 丸みを付けるためのプロパティ */
        }

.linefe {
            border-bottom: 1px solid #adadad;
            width: 100%; /* ラインの幅を調整 */
            margin: 0 auto; /* 画面中央に配置するためのマージン指定 */
            margin-top: 60px; /* 適宜マージンを調整 */
            border-radius: 10px; /* 丸みを付けるためのプロパティ */
        }

.linefe2 {
            border-bottom: 2px solid #f8b700;
            width: 100%; /* ラインの幅を調整 */
            margin: 0 auto; /* 画面中央に配置するためのマージン指定 */
            margin-top: 20px; /* 適宜マージンを調整 */
            border-radius: 10px; /* 丸みを付けるためのプロパティ */
        }

/* コンテナ全体のスタイル */
.containerfq {
            display: flex; /* Flexboxを使用して横並びに配置 */
            justify-content: space-between; /* 要素を均等に配置 */
            margin: 5px; /* 適宜マージンを調整 */
}

/* 各列のスタイル */
.columnfq {
    flex: 1; /* 幅を均等に分割 */
    padding: 10px; /* 適宜パディングを調整 */
    text-align: center; /* テキストを中央寄せ */
}

.columnfq2 {
    flex: 1; /* 幅を均等に分割 */
    padding: 10px; /* 適宜パディングを調整 */
    text-align: center; /* テキストを中央寄せ */
	
	border: 2px solid #000; /* 枠線の色と太さを指定 */
    border-radius: 15px; /* 角丸の半径を指定 */
    padding: 15px; /* 内側の余白を指定 */
    margin: 10px; /* 外側の余白を指定 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 影を追加して立体感を演出（任意） */
}

/* 画像のスタイル */
.columnfq img {
    max-width: 100%; /* 画像が親要素を超えないようにする */
    height: auto; /* アスペクト比を維持 */
}

.columnfq2 img {
    max-width: 100%; /* 画像が親要素を超えないようにする */
    height: auto; /* アスペクト比を維持 */
}

/* スマートフォンの場合の追加スタイル */
@media screen and (max-width: 767px) {
    .containerfq {
        flex-direction: column; /* スマートフォン上では縦並びに配置 */
            margin: 0px; /* 適宜マージンを調整 */
    }
	
/* 各列のスタイル */
.columnfq {
    flex: 1; /* 幅を均等に分割 */
    padding: 10px; /* 適宜パディングを調整 */
    text-align: center; /* テキストを中央寄せ */
}
.columnfq2 {
    flex: 1; /* 幅を均等に分割 */
    padding: 10px; /* 適宜パディングを調整 */
    text-align: center; /* テキストを中央寄せ */
		
	border: 2px solid #000; /* 枠線の色と太さを指定 */
    border-radius: 15px; /* 角丸の半径を指定 */
    padding: 15px; /* 内側の余白を指定 */
    margin: 10px; /* 外側の余白を指定 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 影を追加して立体感を演出（任意） */
}
	
	.columnfq img {
    max-width: 60%; /* 画像が親要素を超えないようにする */
    height: auto; /* アスペクト比を維持 */
}
	.columnfq2 img {
    max-width: 60%; /* 画像が親要素を超えないようにする */
    height: auto; /* アスペクト比を維持 */
}
}

.balloonfq {
  position: relative;
  display: inline-block;
  margin: 1.0em 0;
  padding: 21px 21px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 20px;
  background: #fff0c6;
  border-radius: 10px;
}

.balloonfq:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #fff0c6;
}

.balloonfq p {
  margin: 0;
  padding: 0;
}

/*PCでは無効（改行しない）*/
.sma{
    display: none;
}

/*スマートフォンでは有効（改行する）*/
@media screen and (max-width:768px) {
    .sma{
        display: block;
    }
}

@media (max-width: 768px) {
    .container4 {
        display: flex;
        flex-direction: column-reverse;
    }
}



/*トップスライダー*/
      .swiper {
        display: block;
        padding: 20px 0 20px 0;
      }

      .swiper-slide {

      }

      .swiper-slide img {
        width: 100%;
        height: auto;
        border-radius: 4px;
        display: block;
      }
		
.swiper-progress-bar {
  position: absolute;
  bottom: 20px; /* ページネーションより上に表示 */
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  z-index: 10;
}

.swiper-progress-fill {
  width: 0%;
  height: 100%;
  background: #007aff;
  transition: width 0s;
}

.swiper-pagination {
  text-align: center;
  margin-top: 0px;
  position: relative;
  z-index: 0;
}

.swiper-pagination-bullet {
  background: none;
  width: auto;
  height: auto;
  margin: 0 6px;
}

.bullet-img {
  width: 80px;
  height: 40px;
  object-fit: contain;
}

/*タブ*/
.tabs {
  display: flex;
  margin-bottom: 20px;
}
.tab-button {
  padding: 10px 20px;
  cursor: pointer;
  border: 1px solid #ccc;
  background: #f5f5f5;
  margin-right: 5px;
}
.tab-button.active {
  background: #fff;
  border-bottom: none;
  font-weight: bold;
}
.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}

.blue-storebutton {
display: inline-block;
background-color: #007BFF;
color: #ffffff;
padding: 12px 20px;
text-decoration: none;
border-radius: 5px;
font-size: 16px;
margin-bottom: 20px;
      }

 .highlight66 {
    position: relative;
    display: inline-block;
    font-size: 4.3rem;
    font-weight: bold;
    color: #335b9a;
	  margin-top: 4rem;
  margin-bottom: 4rem;
  }

  .highlight66::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -9px; /* 下線の位置を調整（小さい値にすると上に寄る） */
    width: 100%;
    height: 15px; /* 下線の太さ */
    background-color: #aefbe9; /* 下線の色（明るい水色） */
    z-index: -1; /* テキストの下に表示 */
  }
	  
  .highlight-section {
  background-image: url('data:image/svg+xml,%3Csvg%20version%3D%221.2%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20815%20216%22%3E%3Ctitle%3E%E3%81%AA%E3%81%9C%E3%80%8C3%E3%83%B6%E6%9C%88%E9%99%90%E5%AE%9A%E3%80%8D%E3%81%8C%E5%8A%B9%E6%9E%9C%E7%9A%84%EF%BC%9F3%3C/title%3E%3Cstyle%3E.s0%7Bfill%3A%23c3dbfe%7D%3C/style%3E%3Cpath%20fill-rule%3D%22evenodd%22%20class%3D%22s0%22%20d%3D%22m808.9%2045.5c3.8%209.4%204.9%2019.5%205.3%2029.8-0.4%2010.3-1.5%2020.4-5.3%2029.8-3.7%209.4-10.2%2018.1-19.3%2025.2-9.1%207.1-20.8%2012.5-33.7%2015.7-5.7%201.5-326.4%202.5-332.4%203.2q0.2%200.9%200.2%201.9c0%208.6-9.7%2015.6-28.2%2015.6-18.6%200-28.2-7-28.2-15.6%200-0.2%200-0.3%200-0.5-49.4%200-236.3%200-268.8%200-13.3-0.1-27.4-1.3-40.2-4.6-13-3.2-24.7-8.6-33.7-15.7-9.1-7.1-15.6-15.8-19.4-25.2-3.8-9.4-4.8-19.5-5.2-29.8%200.4-10.3%201.4-20.4%205.2-29.8%203.8-9.4%2010.3-18.1%2019.4-25.2%209-7.1%2020.7-12.5%2033.6-15.7%2012.9-3.3%2026.9-4.5%2040.2-4.6%2041.3%200%20575.9%200%20617.1%200%2013.3%200.1%2027.4%201.3%2040.3%204.6%2012.9%203.2%2024.6%208.6%2033.7%2015.7%209.1%207.1%2015.6%2015.8%2019.4%2025.2zm-407.3%20152.8c-10%200-15.3-4.7-15.3-10.4%200-5.7%205.2-10.4%2015.3-10.4%2010%200%2015.3%204.7%2015.3%2010.4%200%205.8-5.3%2010.4-15.3%2010.4zm26.4%2011.7c0%203.1-2.8%205.6-8.2%205.6-5.4%200-8.2-2.5-8.2-5.6%200-3.1%202.7-5.6%208.2-5.6%205.3%200%208.2%202.5%208.2%205.6z%22/%3E%3C/svg%3E');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
padding: 5rem 1rem 10rem 1rem;
  font-size: 3.0rem;
  font-weight: bold;
  color: #003366;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
  }
	  
.icon66-text-box {
  display: flex;
  align-items: flex-start;
  justify-content: center; /* ← 中央揃え */
  gap: 2rem;
  max-width: 700px;
  margin: 0 auto;
  text-align: left; /* ← 左寄せで読みやすく */
  padding: 1rem;
}

.icon66-img {
margin-top: -24px;
  width: 90px; /* お好みでサイズ調整 */
  height: auto;
  flex-shrink: 0; /* 縮まないようにする */
}

.icon66-text {
    font-size: 3.0rem;
    font-weight: bold;
    color: #335b9a;
  line-height: 1.5;
}

/* スマホサイズ調整 */
@media screen and (max-width: 600px) {
  .highlight66 {
    font-size: 2.1rem;
    max-width: 100vw;
  }
  .highlight66::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0px; /* 下線の位置を調整（小さい値にすると上に寄る） */
    width: 100%;
    height: 10px; /* 下線の太さ */
    background-color: #aefbe9; /* 下線の色（明るい水色） */
    z-index: -1; /* テキストの下に表示 */
  }
  .highlight-section {
	padding: 2rem 1rem 5rem 1rem;
  font-size: 1.4rem;
    width: 80%;
	margin: 0 auto;
  }
.icon66-text-box {
  gap: 1rem;
}
.icon66-img {
margin-top: -14px;
  width: 50px; /* お好みでサイズ調整 */
  height: auto;
  flex-shrink: 0; /* 縮まないようにする */
}
	.icon66-text {
    font-size: 1.6rem;
    font-weight: bold;
    color: #335b9a;
  line-height: 1.5;
}
}

    .step-ellipse {
      display: flex;
      flex-wrap: wrap; /* スマホで折り返しOKに */
      justify-content: center;
      align-items: center;
      background-color: orange;
      border-radius: 9999px;
      padding: 16px 24px;
      font-size: 2.5rem;
      font-weight: bold;
      box-sizing: border-box;
      width: 100%;
      max-width: 90vw; /* スマホで画面に収まるように */
      margin: 0 auto;
      text-align: center;
    }

    .step-ellipse span.step-label {
      color: yellow;
      margin-right: 8px;
    }

    .step-ellipse span.step-text {
      color: white;
    }

.bottom-center-link {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #ccc;
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 13px;
  color: #333;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 9999;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: opacity 0.3s ease;
}
.bottom-center-link:hover {
  background: #f0f0f0;
}

.boxback911 {
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  font-family: "Noto Sans JP", sans-serif;
  max-width: 1100px;
  margin: 0 auto;
}
	
.boxback912 {
  display: flex;
  gap: 28px;
}

.image-card912 {
  flex: 0 0 46%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-card912 img {
  width: 100%;
  height: auto;
  background: #f6f8fa;
  border-radius: 12px;
  padding: 12px;
  display: block;
}

.meta912 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.eyebrow912 {
  position: relative;
  padding-left: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #444;
  line-height: 1.6;
  margin-bottom: 8px;
}

.eyebrow912::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background-color: #e53935; 
  border-radius: 2px;
}

.title912 {
  font-size: 26px;
  font-weight: 800;
  margin: 0;
  line-height: 1.2;
  color: #111;
}
	
.image-sp912 {
  display: none;
}


.divider912 {
  height: 1px;
  background: #e6e6e6;
  margin-top: 4px;
}

.meta-grid912 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}


.info912 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.info-row912 {
  display: flex;
  align-items: center;
  gap: 12px;
}

.label912 {
  font-size: 16px;
  font-weight: 700;
  min-width: 64px;
  color: #000;
}

.price-list912 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #000;
  align-items: flex-end; 
}

.price-item912 {
  font-size: 16px;
}

.price-item912 .term {
  min-width: 100px;
  display: inline-block;
}
	
.amount912 {
  font-weight: 600;
  font-size: 16px;
}

.unit912 {
  font-size: 13px;
  font-weight: 600;
  margin-left: 2px;
}

.buy912 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.amazon-btn912 {
  display: inline-flex;
  align-items: center;
  background: #0078ff;
  color: #fff;
  padding: 14px 14px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 18px;
  box-shadow: 0 6px 18px rgba(0,120,255,0.18);
  transition: background 0.2s, transform 0.2s;
  width: 190px;
   justify-content: center; 
}

.amazon-btn912:hover {
  background: #005fcc;
  transform: translateY(-2px);
}

.steps912 {
  position: relative;
  padding-left: 22px; 
}

.steps912::before {
  content: "";
  position: absolute;
  left: 22px; 
  top: 0px;
  bottom: 0px;
  width: 12px;
  background: #e0e0e0;
  border-radius: 2px;
  z-index: 0;
}

.step912 {
  position: relative;
  padding: 18px 20px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.step-number912 {
  position: absolute;
  top: 40px;
  left: -14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 44px; 
  color: #e53935;
  z-index: 2;
}
	
.image-card913 {
  flex: 0 0 40%;
  padding: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.meta913 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

@media (max-width: 820px) {
	
  .boxback912 {
    flex-direction: column;
    padding: 16px;
  }

  .image-card912 {
    display: none;
  }

  .image-sp912 {
    display: flex;
  }

  .meta-grid912 {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .buy912 {
    width: 100%;
  }

  .eyebrow912 {
    font-size: 12px;
  }

  .title912 {
    font-size: 20px;
  }
	
.label912 {
  min-width: 44px;
}

  .amazon-btn912 {
    width: 100%;
  }
	
.step912 {
    flex-direction: column;
    padding: 16px;
	}
	
.step-number912 {
  width: 30px;
  height: 30px;
  font-size: 33px; 
  left: -21px;
	}

.steps912::before {
  left: 12px; 
  width: 12px;
}
	
}


.site-header {
  background: #fff;
  border-bottom: 1px solid #ddd;
  min-height: 86px;
  position: sticky;
  top: 0;
  z-index: 1100;
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.logo img {
  height: 40px;
  width: auto;
  position: relative;
}
	
.logo,
.nav-right {
  width: 160px;
  height: 86px;
  display: flex;
  align-items: center;
}

.global-nav {
  position: static;
  display: flex;
  justify-content: center;
  flex: 1;
}

.global-nav a {
  pointer-events: auto;
}

.nav-center {
  display: flex;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-center a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #333;
  padding-bottom: 6px;
}

.nav-center a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: #0073aa;
  transform: translateX(-50%);
  transition: width 0.2s ease;
}

.nav-center a:hover::after,
.nav-center a.is-active::after {
  width: 100%;
}

.nav-center a:hover,
.nav-center a.is-active {
  color: #0073aa;
}

.nav-center a:hover .svg-logo,
.nav-center a.is-active .svg-logo {
  filter: brightness(0) saturate(100%) invert(32%)
          sepia(87%) saturate(1800%) hue-rotate(190deg);
}

.nav-right {
  list-style: none;
  margin: 0;
  padding: 0;
}

.svg-logo {
  height: 24px; 
  width: auto;
  display: block;
}

.contact a {
  background: #0073aa;
  color: #fff;
  padding: 6px 14px;
  border-radius: 4px;
  text-decoration: none;
}
	
.nav-center li {
   position: static;
}
	
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid #ddd;
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
  padding: 24px 0;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-12px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  box-sizing: border-box;
}

.dropdown.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);}
	
.dropdown ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dropdown a {
  color: #333;
  text-decoration: none;
  font-size: 14px;
}

.dropdown a:hover {
  color: #0073aa;
  text-decoration: underline;
}
	
.news-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, 235px);
  gap: 24px;
  justify-content: center;
}
	
.news-list li {
  box-sizing: border-box;
  margin-bottom: 24px;
}

.news-list a {
  display: block;
  text-decoration: none;
  color: #333;
}

.news-list img {
  width: 100%;
  height: 125px;
  object-fit: cover;
}

.news-title {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.4;
}
	
.news-date {
  display: block;
  font-size: 12px;
  color: #888;
  margin-bottom: 4px;
}

.news-list a:hover .news-title {
  color: #0073aa;
}

.news-archive-btn {
  margin-top: 16px;
  text-align: center;
}

.news-archive-btn a {
  display: inline-block;
  padding: 10px 18px;
  background: #fff;
  color: #1a73e8;
  border: 2px solid #1a73e8;
  font-weight: bold;
  font-size: 14px;
  border-radius: 6px;
  width: 90%;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.news-archive-btn a:hover {
  opacity: 0.85;
}
	
.guide-list {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  gap: 12px;
  padding: 15px 0px;
  justify-content: center;
  margin: 0 auto;
}

.guide-list li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
  text-decoration: none;
  color: #333;
}

.guide-list img {
  width: auto;
  height: 74px;
  max-width: 100%;
  object-fit: contain;
}

.guide-list li.main {
  aspect-ratio: 1 / 1;
  grid-row: span 2;
}
	
.guide-list li.main img {
  height: 200px;
}

.guide-title {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
}

.product-menu-cols {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center; 
}

.product-menu-col {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; 
}

.product-menu-head {
  width: 100%;
  font-weight: 700;
  color: #0087f8;
  font-size: 14px;
  text-align: center; 
padding-bottom:10px
}
	
.product-menu-items {
	display: flex;
	gap: 16px;
	justify-content: center;
	width: 100%;
}

.product-menu-item {
	flex: 1 1 220px;
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	min-width: 120px;
	max-width: 220px;
}

.product-menu-item img {
	width: 100%;
	height: auto;
	object-fit: contain;
	max-width: 200px;
}
	
.news-list a:hover img,
.guide-list a:hover img,
.product-menu-items a:hover img {
  opacity: 0.85;
}

  .dropdown-close-wrap {
    display: block;
    padding: 16px 0 8px;
    text-align: center;
  }

  .dropdown-close {
    appearance: none;
    border: none;
    background: #f0f4f8;
    color: #0073aa;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 24px;
    border-radius: 999px;
  }

  .dropdown-close:active {
    background: #e0ebf5;
  }

@media (max-width: 820px) {

  .site-header {
    min-height: auto;
  }

  .header-inner {
    overflow: visible;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
  }

  .logo {
    position: absolute;
    left: 0;
    top: 0;
  }
	
 .logo img {
    height: 32px;
  }
	
  .logo,
  .nav-right {
    height: 56px;
  }

  .header-inner > .logo,
  .header-inner > .nav-right {
    padding: 0 16px;
  }

  .header-inner > .logo {
    justify-content: flex-start;
  }

  .nav-right {
    justify-content: flex-end;
    position: absolute;
    right: 0;
    top: 0;
  }

  .global-nav {
    position: static;
    width: 100%;
    margin-top: 56px;
    border-top: 1px solid #ddd;
  }

  .nav-center {
    left: 0;
    transform: none;
    justify-content: space-around;
    width: 100%;
    padding: 10px 8px;
    gap: 0;
  }
	
.nav-center a {
  padding-bottom: 0px;
}
	
  .nav-center a {
    font-size: 12px;
    gap: 4px;
  }

  .svg-logo {
    height: 20px;
  }
	
.news-list {
  display: flex;
  flex-direction: column;
}

.news-list li {
    flex: none;
    width: 100%;
    margin: 0;
}

.news-list li a {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 6px;
}

.news-list li a img {
    width: 100%;
    max-width: 200px;
  height: auto;
  object-fit: cover;
  flex-shrink: 0;
}

.news-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.news-date {
  font-size: 12px;
  color: #888;
}
	
.news-archive-btn a {
  padding-bottom: 6px;
}

  .dropdown {
    max-height: calc(100dvh - 112px - env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-left: 16px;
    padding-right: 16px;
  }

}

.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  visibility: hidden;
  z-index: 900;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
	
@media (max-width: 767px) {
.guide-list {
  grid-template-columns: 1fr;
}

.guide-list li.main {
  grid-row: auto;
  aspect-ratio: auto;
}
	
.guide-list li a {
  padding-bottom: 6px;
}
	
  .product-menu-cols {
    gap: 24px;
    align-items: stretch;
  }

  .product-menu-col {
    flex-direction: column;
    align-items: stretch;
  }

  .product-menu-items {
    flex-direction: column;
    gap: 16px;
    overflow-x: visible;
  }

  .product-menu-item {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
  }

  .product-menu-item img {
    width: 200px;
  }

  .product-menu-head {
    text-align: center;
    font-size: 16px;
  }

}

body.is-menu-open .menu-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.is-menu-open {
  overflow: visible;
}

/* =========================
  フッター全体
========================= */
.site-footer {
  background: #016ae9;
  border-top: 1px solid #ddd;
  padding: 48px 20px 24px;
  font-size: 14px;
}

.site-footer a {
  color: #fff;
  font-weight: bold;
}

.site-footer a:hover {
  text-decoration: underline;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-logo {
  text-align: center;
  margin-bottom: 32px;
}

.footer-logo img {
  max-width: 260px;
}

.footer-nav-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
}

.footer-col-title {
  font-weight: bold;
  margin-bottom: 12px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 6px;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-col li {
  margin-bottom: 8px;
  line-height: 1.6;
}

@media (max-width: 600px) {
  .site-footer {
    padding: 32px 16px 20px;
  }

  .footer-nav-cols {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.typing-grid {
  display: flex;
  flex-wrap: wrap;
}

/* =========================
   タイピングの学校2カラムレイアウト
========================= */

.position-side {
  width: 90%;
  max-width: none;
  margin: 0 auto;
}
	
.layout-2col {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  width: 90%;
  margin: 0 auto;
}

.main-content {
  flex: 1;
  min-width: 0;
}

.sidebar {
  width: 300px;
  flex-shrink: 0;
  position: static;
  top: 100px;
  align-self: flex-start;
  border-radius: 12px;
  margin-top: 24px;
}

.sidebar-inner {
  position: static;
}

.sidebar-box1,
.sidebar-box2 {
  background: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 6px 16px 16px 16px;
  margin-bottom: 20px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}
	
.sidebar-box1 {
  border: 2px solid #f7d668;
}

.sidebar-box2 {
  border: 2px solid #a0d1f7;
}

.sidebar-orange,
.sidebar-blue{
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
  padding-left: 10px;
}

.sidebar-orange{
  border-left: 4px solid #f8b700;
}

.sidebar-blue{
  border-left: 4px solid #0099ff;
}

.sidebar-box1 ul,
.sidebar-box2 ul {
  counter-reset: sidenav;
  list-style: none;
  padding-left: 0.5em;
  margin: 0;
}

.sidebar-box1 li,
.sidebar-box2 li {
  counter-increment: sidenav;
  position: relative;
  padding-left: 2.5em;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  line-height: 1.5;
}

.sidebar-box1 li::before,
.sidebar-box2 li::before {
  content: counter(sidenav);
  position: absolute;
  left: 0;
  top: calc(50% - 0.5em);
  transform: translateY(-50%);
  width: 30px;
  height: 34px;
  background: url("https://www.typing-gate.com/wordpress2/wp-content/themes/typing/img/item/typing-school/key1.svg") no-repeat center / contain;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-box1 li::before{
  background: url("https://www.typing-gate.com/wordpress2/wp-content/themes/typing/img/item/typing-school/key1.svg") no-repeat center / contain;
}
.sidebar-box2 li::before {
  background: url("https://www.typing-gate.com/wordpress2/wp-content/themes/typing/img/item/typing-school/key2.svg") no-repeat center / contain;
}

.sidebar-box1 a,
.sidebar-box2 a {
  display: block;
  border-radius: 8px;
  color: #333;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.sidebar-box1 a:hover,
.sidebar-box2 a:hover {
  background: #f0f7ff;
  color: #0099ff;
}
	
.home-box {
  text-align: center;
}

.home-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #ff9800;
  color: #fff;
  font-weight: bold;
  padding: 12px 16px;
  border-radius: 999px; 
  text-decoration: none;
  transition: all 0.2s ease;
}

.home-btn:hover {
  background: #ff7a00;
  transform: translateY(-2px);
}

.icon-school {
  width: 1.2em;
  height: auto;
  vertical-align: middle;
}

@media screen and (max-width: 912px) {
  .main-content {
    order: 1;   /* メインを上 */
  }

	.layout-2col {
    flex-direction: column;
  }

  .sidebar {
    order: 2;   /* サイドバーを下 */
    display: block;
    width: 100%;
    position: static;
    margin-top: 0px;
  }

.sidebar-box1,
.sidebar-box2 {
    margin: 16px 0;
  }

.sidebar-box1 li,
.sidebar-box2 li {
    list-style: none;
    border-bottom: 1px solid #eee;
  }

.sidebar-box1 li:last-child,
.sidebar-box2 li:last-child {
    border-bottom: none;
  }
}

.icon-school {
  width: 1.2em;   /* 文字サイズに連動 */
  height: auto;
  vertical-align: middle;
}

/* =========================
   タイピングの学校
========================= */

.layout-wrapper { 
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 40px; 
	padding-top: 20px; 
	background: linear-gradient(to bottom, #ffffff, #fff3bb); 
	}
.center-area { 
	flex: 1; 
	min-width: 300px; 
	text-align: center; 
	}
.center-icon { 
	width: 150px; 
	height: auto; 
	}
	
.typing-school {
  padding: 0px 20px;
}

/* カテゴリ見出し */
.category-title1 {
  font-size: 1.6em;
  font-weight: bold;
  margin: 40px 0 20px;
  padding-left: 12px;
  border-left: 6px solid #f7d668;
}
	
.category-title2 {
  font-size: 1.6em;
  font-weight: bold;
  margin: 40px 0 20px;
  padding-left: 12px;
  border-left: 6px solid #85ea5b;
}

/* グリッド */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 320px));
  gap: 24px;
  justify-content: start;
  counter-reset: card-num;
}

/* カード */
.menu-card {
  display: block;
  color: inherit;
  text-decoration: none;
  background: #ffffff;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.08);
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
  counter-increment: card-num;
}
	
/* 丸数字本体 */
.menu-card::before {
  content: counter(card-num);
  position: absolute;
  top: -12px;
  left: -12px;
  width: 45px;
  height: 51px;
  background: url("https://www.typing-gate.com/wordpress2/wp-content/themes/typing/img/item/typing-school/key1.svg") no-repeat center / contain;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
}

/* カテゴリ②は色を変える */
.category-title2 + .menu-grid .menu-card::before {
  background: url("https://www.typing-gate.com/wordpress2/wp-content/themes/typing/img/item/typing-school/key2.svg") no-repeat center / contain;
}

.menu-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.12);
}

/* 画像 */
.menu-card img {
  width: 100%;
  max-height: 180px;
  object-fit: contain;
  margin-bottom: 12px;
}

/* 見出し */
.menu-card h3 {
  font-size: 1.2em;
  margin-bottom: 8px;
}

/* テキスト */
.menu-card p {
  font-size: 0.95em;
  line-height: 1.6;
}

/* リスト */
.menu-card ul {
  padding-left: 18px;
  font-size: 0.95em;
}

.menu-card li {
  margin-bottom: 4px;
}
	
/* ===== スマホ対応 ===== */
@media (max-width: 768px) {
.typing-school {
  padding: 0px 0px;
}
	
  .layout-wrapper {
	  padding-top: 40px; 
	}
  .center-icon {
	  width: 100px;
	  height: auto;
	}
  .category-title {
    font-size: 1.3em;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.boxback11 {
  background: url("/wordpress2/wp-content/themes/typing/img/common/bg_loop.png") repeat-x top center;
  background-size: auto 100%;
}

.boxback12 {
  background: url("/wordpress2/wp-content/themes/typing/img/common/bg_loop2.png") repeat-x top center;
  background-size: auto 100%;
}

.container11 {
  position: relative;
  text-align: center;
}

.hero-img {
  width: 50%;
  height: auto;
  display: block;
  margin: 0 auto;
}

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



/* =========================
正しい姿勢・手の置き方
========================= */

@media (min-width: 913px) {
  .posture-list {
    display: flex;
    gap: 80px;
  }
}

  .page-title-tg {
  font-size: 1.9em;
  font-weight: 700;
  text-align: center;
  margin: 40px 12px 12px 12px;
  color:#006ae8;
  position: relative;
}

.page-title-tg::after {
  content: "";
  display: block;
  width: 64px;
  height: 6px;
  background: #006ae8;
  margin: 12px auto 0;
  border-radius: 2px;
}

@media (max-width: 767px) {
  .page-title-tg {
    font-size: 1.4em;
  }
}