@charset "utf-8";

/*---------------------------------------------
	Browser Default Initialization
	ブレークポイント 640px(40em)
	レイアウト 980px
  ---------------------------------------------*/

html {
	overflow-y: scroll;
}

body, div, dl, dt, dd, ul, ul li, h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea, p, blockquote, th, td,
section, nav, article, aside, hgroup, header, address,
figure, figcaption {
	margin: 0;
	padding: 0;
	line-height: 160%;
  font-family:'メイリオ', 'Meiryo', sans-serif;
}
address, caption, cite, code, dfn, em, strong, th, var {
	font-style: normal;
	font-weight: normal;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th {
	text-align: left;
}
q:before ,q:after {
	content: '';
}
object, embed {
	vertical-align: top;
}
hr, legend {
	display: none;
}
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: normal;
}
img, abbr, acronym, fieldset {
	border: 0;
}
img {
	vertical-align: top;
	-ms-interpolation-mode: bicubic;
}
ul li {
	list-style-type: none;
}

.fl{
	float:left;
	margin:0;
	padding:0;
}

.fr{
	float:right;
	margin:0;
	padding:0;
}
.mar_t10{margin-top:10px !important;}
.mar_t20{margin-top:20px !important;}
.mar_t30{margin-top:30px !important;}
.mar_t50{margin-top:40px !important;}
.mar_t30{margin-top:50px !important;}
.mar_b10{margin-bottom:10px !important;}
.mar_b20{margin-bottom:20px !important;}
.mar_b30{margin-bottom:30px !important;}
/* ------ Body ------ */

body {
	font-family: '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	color: #333333;
	font-size: 16px;
	line-height: 160%;
	text-align: center;
	letter-spacing: -0.001em;		/* iOS4でのテキストの隙間への対応 */
	-webkit-text-size-adjust: 100%;		/* 文字サイズの自動調整機能のキャンセル */
}


/* ------ Anchor ------ */

a {
	outline: none;
}

a:link {
	text-decoration: none;
	color: #333333;
}
a:visited {
	text-decoration: none;
	color: #333333;
}
a:hover {
	text-decoration: none;
	color: #333333;
}
a:active {
	text-decoration: none;
	color: #333333;
}
a.link_text{text-decoration: underline;color:#0000ff;}
a.link_text:hover{text-decoration: none;color:#3399ff;}

/*-----------------------------------------------------	*/
/*	for all						*/
/*-----------------------------------------------------	*/

/* ------ General Settings ------ */

/* レスポンシブ 640px基準 各設定は最下部にまとめて記載 */
.sp_none{
	display:block;
}
.pc_none{
	display:none;
}


/* フルードイメージ対応 */
img {
	max-width: 100%;
	height: auto;
}
.ie8 img {
	width: auto;
}

p {
	font-size: 16px;
}

.img {
	text-align: center;
}

.text-center {
	text-align: center;
}
small{font-size:80%;}


/* ------ Font ------ */

/* 各ブラウザに対応したWebフォントを指定 */
@font-face {
	font-family: 'icomoon';
	src:url('fonts/icomoon.eot');
	src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
		url('fonts/icomoon.woff') format('woff'),
		url('fonts/icomoon.ttf') format('truetype'),
		url('fonts/icomoon.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

a:hover img {
        opacity: 0.6;
        filter: alpha(opacity=60);
}
.line-through{text-decoration: line-through;}
strong.campaign{font-weight:bold;color:#ff0000;font-size:120%;}
.txt-right{text-align: right;}
/* ------ Go2top ------ */

.pagetop {
	position: fixed;
	bottom: -50px;
	right: 15px;
}
.pagetop a {
	display: block;
	width: 50px;
	height: 50px;
	background-color: #ff8f22;
	border-radius: 50px;
	text-align: center;
	color: #fff;
	font-size: 25px;
	text-decoration: none;
	line-height: 50px;
}

.border_b_pink{border-bottom:5px solid #DE427F;color:#DE427F;display: inline-block;}
.border_b_black{border-bottom:5px solid #333333;color:#333333;display: inline-block;}
.border_b_grey{border-bottom:5px solid #666666;color:#666666;display: inline-block;}
.border_b_white{border-bottom:5px solid #ffffff;color:#ffffff;display: inline-block;}
.border_b_blue{border-bottom:5px solid #0066ff;color:#0066ff;display: inline-block;}
.border_b_blue2{border-bottom:5px solid #6699ff;color:#6699ff;display: inline-block;}
.border_b_purple{border-bottom:5px solid #330068;color:#330068;display: inline-block;}
.border_b_green{border-bottom:5px solid #006633;color:#006633;display: inline-block;}
/*--------header--------*/


header{
	width:100%;
	padding:0;
	height:70px;
	/*background-color: rgba( 255, 255, 255, 0.55 );*/
	background:#ffffff;
	/*display:inline-block;*/
	border-bottom:1px solid #cccccc;
	margin:0;
	text-align:center;
  z-index:9999;
	}
header #header_box{
	width:80%;
	/*display:inline-block;*/
	margin:0 10% 0 10%;
}

header.fixed {
	position: fixed;
	top: 0;
	left:0;
	padding:0;
	height:70px;
	background-color: rgba( 255, 255, 255, 0.9 );
}


#logo_box{
	float:left;
	width:250px;
	height:auto;
	margin-top:15px;
	}

#logo_box img{
  width:100%;
}

nav {
	margin:5px 0 0 0;
	padding:0px;
	}


nav ul#navi_box {
	color:#202020;
	text-align:center;
	list-style:none;
	font-size:80%;
	margin-top:10px;

	}


nav ul#navi_box li{
	float:right;
	height:30px;
	padding: 10px 0;
	margin:0;
	border-left:1px solid #cccccc;
	line-height:130%;
	}
nav ul#navi_box li:hover{
	background-color: rgba(153,153,204,0.1);
}
nav ul#navi_box li.li_mid{
	line-height:30px;
	}

nav ul#navi_box li a{
	padding: 0 5px;
	display:block;
	text-decoration:none;
	width:90px;
	}
  nav ul#navi_box li a.w_s{
  	width:80px;
  }

nav ul#navi_box li a:hover{
	text-decoration:none;
	opacity: 0.6;
	filter: alpha(opacity=60);
	}

header #contact_box{
	width:350px;
	margin:10px 0 0 0;
	}
header #contact_box #phone_btn{
	width:200px;
	}
header #contact_box #otoiawase_btn{
	width:150px;
	}

header #contact_box2{ display:none;}

@media screen and (max-width: 1200px) {
	header #header_box{width:99%;margin:0 0 0 1%;}
	nav ul#navi_box{ display:none;}
}
@media screen and (max-width: 1200px) {
	header #contact_box{ display:none;}
	header #contact_box2{ display:block;width:100px;float:right;margin:0;padding:0;}
}

section h3{margin:20px 0 40px 0;}
/** 特徴 **/
h3.midashi{
	margin:0 0 10px;
	padding:0px 10px;
	border-left:5px solid #4EBAE5;
}

section dl.pt1 dd ol{
	margin:0 0 20px 30px;
	padding:0;
}
section dl.pt1 dd ol li{
	margin:0 0 12px 0;
	padding:0;
  font-size:1.0em;
}
section dl.pt1 dd ol li strong{
	color:#0099ff;
  font-size:1.2em;
}
section dl.pt1 dd p{
	line-height:200%;
}
section dl.pt1 dd p.image{
	width:100%;
	text-align:center;
}

section dl.pt1 dd p.image img{
	width:700px;
	padding:0;
}

/*--------contents--------*/
.clearfix:after {
  content: ".";
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix {
  height: 0;
  clear: both;
}
#container {
	width:100%;
	margin: 0 auto;
	text-align:center;
  padding:0;
  overflow-x: hidden;
}

.bg_gray{
	background:#f1f1f1;
}
.bg_toi{
	background:#6699ff;
}
.bg_white{
	background:#ffffff;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}
section{
	width: 970px;
	margin:0 auto;
	padding:10px 0 10px 0;
	display:inline-block;
	color:#333333;
	margin:0 5%;
}


section h2{
	/*color: #330068;*/
	text-align:center;
	font-size:210%;
	font-weight:bold;
	letter-spacing:1px;
}

section#feature h2{font-size:180%;}

#otoiawase h2{
	color: #fff;
	text-align:center;
	font-size:280%;
	font-weight:bold;
	margin-bottom:50px;
	letter-spacing:1px;
}

section h3{
	color: #0066ff;
	font-size:150%;
	font-weight:bold;
}

section dl{
	width:90%;
	clear: both;
	display:inline-block;
	text-align:left;
	padding:0;
	margin:0 5%;
}
section dl dt{
	width:45%;
	float: left;
	margin:0;
	padding:0;
}
section dl dd{
	width:45%;
	margin:0;
	padding:0;
	float: right;
}
section dl img{
	width:100%;
	height:auto;
}

section dl.pt1 dt{
	width:47%;
}
section dl.pt1 dd{
	width:47%;
}

section dl.pt2 dt{
	width:38%;
}
section dl.pt2 dd{
	width:60%;
}

section dl.pt2 dt strong, section dl.pt2 dd strong{
	font-weight:bold;
	font-size:105%;
}


section dl.pt3 dt{
	width:45%;
}

section dl.pt3 dd{
	width:10%;
	float: left;
}
section dl.pt3 dt.bg{
	background:#f5f5f5;
}

section#merit h3{
	text-align:left;
	font-size:180%;
	color:#6699ff;
	margin-bottom:20px;
}

section#merit p{
	margin-top:-20px;
}

section#merit h3 strong{
	font-size:140%;
	color:#6699ff;
	font-style:italic;
	margin-right:10px;

}
section#merit dl.pt3 dt.bg{
	background:#f5f5f5;
	padding-bottom:20px;
}

section#merit #merit3 { width:90%; margin:0 5% 0 5%;}
section#merit #merit3_sp{ display:none;}

#iconbox {
	background:#6699ff;
	width:70%;
	margin:20px 15% 30px 15%;
	padding:5px 10px 5px 10px;

   }

 #iconbox2 {
    background:#ff8f22;
	width:70%;
	margin:0px 15% 10px 15%;
	padding:8px 10px 8px 10px;
	text-align:center;
	color:#FFFFFF;
	font-size:130%;
	font-weight:500;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
   }

#iconbox2:hover{
	opacity: 0.6;
	filter: alpha(opacity=60);
	text-decoration:none;
}

#iconbox2 a { text-decoration: none;}
#iconbox2 a:hover { text-decoration: none;}

section dl.pt3 dt h4{
	font-size:115%;
	font-weight:bold;
	text-align:center;
	margin:0px 0;
	color:#fff;
}

section dl.pt3 dt ul{
	width:90%;
	margin:0 5% 20px 5%;
	padding:0;
	clear:both;
	display:inline-block;
}
section dl.pt3 dt ul li{
	width:25%;
	margin:0;
	padding:0;
	text-align:center;
	float:left;
}
section dl.pt3 dt ul li img{
	width:96%;
	margin:0 2%;
}


/*--------お問い合わせ--------*/


#otoiawase dl.btn { width:90%; display:inline-block; padding:20px 5%; margin:0;}
#otoiawase dl.btn dt{ width:47%; float:left; margin:0; padding:0; text-align:center;}
#otoiawase dl.btn dd{ width:47%; float:right; margin:0; padding:0; text-align:center;}
#otoiawase dl.btn dt img, #otoiawase dl.btn dd img{ width:100%;}

#otoiawase dl.btn3 { width:96%; display:inline-block; padding:20px 2%; margin:0;}
#otoiawase dl.btn3 dt{ width:32%; float:left; margin:0 2% 0 0; padding:0; text-align:center;}
#otoiawase dl.btn3 dd{ width:32%; float:left; margin:0 2% 0 0; padding:0; text-align:center;}
#otoiawase dl.btn3 dd.last{ width:32%; float:left; margin:0; padding:0; text-align:center;}
#otoiawase dl.btn3 dt img, #otoiawase dl.btn3 dd img{ width:100%;}
/*--------footer--------*/
footer {
	width: 100%;
	margin: 30px auto 0;
	text-align: center;
  background: #f1f1f1;
  padding:50px 0 70px;
}
#footer {
	width: 100%;
	margin: 0;
	text-align: center;
  padding:0;
}
#footerarea {
	width: 100%;
	max-width: 960px;
	text-align: center;
	clear: both;
	margin:0 auto;
	overflow:hidden;
	padding:0;
	margin: 0 auto;
}


/*FooterInfo*/
#footerinfo {
	padding: 10px 0 0;
	text-align:center;
	display:block;
	margin: 0 auto;
	width:80%;
}

#footertxt {
	display:block;
	padding: 15px 0 0;
	line-height:1.4;
	width:50%;
	float:left;
	font-size:0.8em;
	text-align: left;
}

#footertxt a {
	text-decoration:underline;
	color:#6699ff;
}

#footertxt a:hover{
	cursor:pointer;
	color:#ff8f22;
}

div.ft_24logo{
	width:50%;
	padding:2%x;
	float:left;
}

.ft_24logo img{
	margin:20px 5% 0 0;
	width:60%;
	float:right;
}
/*Copyright*/
#copyright {
	clear: both;
	font-size: 10px;
}

.copyright{
	padding:10px 0 0 0;
	}


@media screen and (max-width: 980px) {
	section{width:90%;}
	section h2, #otoiawase h2{font-size:180%;}
	section#feature h2{font-size:140%;}
	section h3{font-size:130%;}
	section dl.pt2 dt .case_l, section dl.pt2 dt .case_r{width:90%;padding:3%;margin:0;font-size:100%;}
	section p{font-size:100%;}
}
@media screen and (max-width: 780px) {
#footer {
	width: 95%;
	margin: 0 auto;
	text-align: center;
	margin-bottom:-30px;
}
.ft_24logo img{
	margin:10px 5% 0 0;
	width:95%;
	float:right;
}
}
@media screen and (max-width: 640px) {
	/**共通**/
	.sp_none{display:none;}
	.pc_none{display:block;}

	.fl{clear:left;}
	.fr{clear:right;}

	/**メイン画像
	h1{font-size:120%;margin-top:20px;text-align:left;font-weight:bold;letter-spacing:1px;}
	#main_box{}
	#main {}
	#main_center{ width:90%; margin:10px 5% 0 5%;}
	#main_center img{}
	#main_center .fl img{margin:10% 0 0 0;}

	#main_center h1{margin:10px 0 0 0;font-size:120%;}
	#main_center h1 strong{ font-size:150%;}
	#main_center p{ margin:10px 0 0 0;padding:0;font-size:120%;}
	#main_center .text_sec{ margin:5px 0 0 0;text-align:left;}
	#main_center .waku{ margin:10px 0 10px 0px;padding:5px;font-size:130%;}
	#main_center .fr img{margin:5px 0 0 0;}**/

	/**コンテンツ**/
	section{width: 90%;margin:0 5%;padding:10px 0;}
	section h2{font-size:150%; margin:30px 0;}
	section#feature h2{font-size:120%;text-align:left;}
	section img{width:80%;margin:0 10%;}
	section#feature img{width:50%;margin:0 25%;}

	section dl dt, section dl dd, section dl.pt1 dt, section dl.pt1 dd
	, section dl.pt2 dt, section dl.pt2 dd
	, section dl.pt3 dt, section dl.pt3 dd{width:100%;clear: both;}

	section dl.pt2 dt, section dl.pt2 dd{padding:0;margin:0;}
	section dl.pt1 dt img, section dl.pt1 dd img{width:80%;margin:0 10%;}
	section dl.pt2 dt img, section dl.pt2 dd img{width:80%;margin:0 10%;}
	section dl.pt3 dt img, section dl.pt3 dd img{width:80%;margin:0 10%;}

	h3.midashi{margin:20px 0 10px;}
	section dl.pt1 dd dl.pt_inner dt{width:100%;}
	section dl.pt1 dd dl.pt_inner dd{width:100%;}
	section dl.pt1 dd p.image{width:100%;margin:0 0 10px;}
	section dl.pt1 dd p.image img{width:100%;margin:0;}
	section dl.pt1 dd #iconbox2{width:90%;margin:0 5% 10px;}

	#otoiawase dl.btn { width:90%;padding:0 5%; margin:0;}
	#otoiawase dl.btn dt{ width:100%; clear:both; margin:20px 0 20px 0;padding:0;}
	#otoiawase dl.btn dd{ width:100%; clear:both; margin:0 0 20px 0;padding:0;}
	#otoiawase dl.btn dt img, #otoiawase dl.btn dd img{ width:100%;margin:0;}

  #otoiawase dl.btn3 { width:90%;padding:0 5%; margin:0;}
	#otoiawase dl.btn3 dt{ width:100%; clear:both; margin:20px 0 20px 0;padding:0;}
	#otoiawase dl.btn3 dd{ width:100%; clear:both; margin:0 0 20px 0;padding:0;}
  #otoiawase dl.btn3 dd.last{ width:100%; clear:both; margin:0 0 20px 0;padding:0;}
	#otoiawase dl.btn3 dt img, #otoiawase dl.btn3 dd img{ width:100%;margin:0;}

	#footerinfo {width:100%;}
	#main_center ul.fv li.fv4{ font-size:90%;margin-top:0px;margin-bottom:10px;width:45px;height:45px;}
  #main_center ul.fv li.fv5{ font-size:90%;margin-top:0px;margin-bottom:10px;width:65px;height:45px;}

	section h2, #otoiawase h2{font-size:150%;}
	.ft_24logo{width:50%;clear:both;margin:0;}

}

/** 新着情報 **/
section#info{margin:10px 5% 0 5% auto;padding:0px 0 10px 0;}
section#info p{font-size:120%;width:100%;text-align:center;line-height:180%;margin:0;padding:10px 0;}
section#info p strong{font-weight:bold;}
section#info p a{text-decoration:underline;color:#330068;font-weight:bold;}
section#info p a:hover{text-decoration:none;opacity:0.8;}
section#info #iconbox2 a{font-size:120%;font-weight:bold;}

@media screen and (max-width: 640px) {
	section#info p{font-size:100%;width:100%;text-align:left;line-height:160%;margin:0;padding:10px 0;}
	section#info #iconbox2 a{font-size:80%;font-weight:normal;}
}
/** MOT/HotelPhoneとは? **/
#function_box{
  background-image:url(../img/bg_content1.jpg);
	background-size:cover;
	display:inline-block;
	width:100%;
	color:#fff;
	text-align:center;
}
#function_box section h2, #function_box section h3{
  color:#ffffff;
  padding-bottom:20px;
  font-weight:normal;
}
/** 機能一覧 **/
#function_list ul, #function_list ol{width:80%;margin:0 0 10px 30px;}
#function_list ul li{margin:0 0 10px 50px;padding:0 0 0 10px;clear:both;width:auto;text-align:left;font-size:120%;list-style-type: disc;}
#function_list ol li{margin:0 0 10px 20px;padding:0 0 0 10px;clear:both;width:auto;text-align:left;font-size:120%;}
#function_list ul#list_none{list-style: none;}
#function_list ul#list_none li{list-style-type: none;font-size:12px;margin:0 0 5px 20px;padding:0;}

table.responsive{
  padding:0; border-right:0px solid #fcfcfc;
}
table.responsive {
  border-collapse: collapse;
  width: 100%;
}
table.responsive th,
table.responsive td {
  padding: 10px 2%;
  border: 1px solid #999;
}
table.responsive th {
  background-color: #eee;
  text-align: center;
  width: 30%;
}
table.responsive td {
  text-align: left;
}
table.responsive td ul.list_disc{
  margin-top:0;
  margin-bottom:10px;
}
table.responsive td ul.list_disc li{
  margin-top:0;
}
@media screen and (max-width: 480px) {
  table.responsive {
    border-top: 1px solid #999;
  }
  table.responsive td {
    display: block;
    text-align: left;
    width: 96%;
  }
  table.responsive th {
    display: block;
    border-top: none;
    border-bottom: none;
    width: 96%;
  }
  strong.campaign{font-size:100%;}
}
img.img_full{width:100%;max-width:780px;margin:0 auto;}
.flow_midashi{font-weight:bold;color:#3399ff;}
.guest{border-radius: 10px;background:#339900;color:#ffffff;padding:3px 5px;font-size:80%;text-align: center;display: inline-block;}
.stuff{border-radius: 10px;background:#ff9900;color:#ffffff;padding:3px 5px;font-size:80%;text-align: center;display: inline-block;}

.yoyakukanri{
	display:flex;
	margin-top:50px;
	margin-bottom:30px;
  }
  .yoyakukanri1{
	margin:20px;
	border:solid 2px #dcdcdc;
	border-radius:10px;
	padding:20px;
	box-shadow: 0 0 8px #dcdcdc;
  }
  .yoyakukanri1 p{
	font-weight:bold;
  }
  @media only screen and (max-width: 750px) {
	.yoyakukanri{
	  display:block;
	  width:100%;
	}
  }
  .function_y{
	display:flex;
	margin-top:50px;
	flex-wrap: wrap;
	justify-content:space-between; 
  }
  .function_y div{
	background-color:#EBFAFD;
	width:calc(83%/3);
	border-radius:10px;
	margin: 10px;
	padding:15px;
  }
  .function_y div:nth-of-type(n+4){
	margin-left:0px;
  }
  .function_y div:nth-of-type(n){
	margin-left:0px;
  }
  .function_y div:nth-of-type(n+3){
	margin-right:0px;
  }
  .function_y div:nth-of-type(n+6){
	margin-right:0px;
  }
  .function_y_h{
	font-size:18px;
	font-weight:bold;
	color:#0099FF;
  }
  .function_y_d{
	font-size:15px;
  }
  @media only screen and (max-width: 750px) {
	.function_y{
	  display:block;
	}
	.function_y div{
	  width:95%;
	}
  }