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

a:link {color:#F06; text-decoration:none}
a:visited {color:#63C; text-decoration:none}
a:hover {color:#390;}
a:active {color:#063;}
ul {list-style-type:none; list-style-position:outside;margin:0; padding:0;}
h2 { font-size:100%; font-style:normal; line-height:normal; margin:auto; text-indent:-9999px}
h3 { font-size:110%; line-height:200%; border-left:10px solid #FFDFE7; border-bottom:1px solid #500; margin:0; padding:0 0 0 10px; clear:both}
h4 { font-size:100%; line-height:110%; margin:20px 10px 0 10px; padding-left:1%; border-left:5px solid #FFDFE7;}
h5 { font-size:100%; font-style:normal; line-height:normal; margin:auto; color:#f00;}
p { margin:2%;}
hr { height:1px; background-color:#000; border:none; margin:1% 1% 3% 1% }
table {border:1px solid #F9DAD9; cellspacing:0; cellpadding:5%; text-align:center; margin:5px 0}

/*---------- レイアウト* ----------*/
body {font-family:"メイリオ", "Meiryo", "Osaka", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; margin:0; padding:0; background-color:#FFF9FC}
img { max-width:100%; height:auto; border:0; display:block; margin:0 auto;}
#container { position:relative; width:100%; max-width:1024px; height:100%; margin:0 auto; background-color:#FFF;}
.photo {float:left;max-width:100%; width:200px; height:auto; margin:0 1em 1em 0;}

/*---------- ヘッダー関係 ----------*/
#header1 {position:relative; width:auto; max-width:1024px; margin:0 auto; background-color:#FFF;}
#catch {width:100%;height:9; font-size:9px; background-color:#FFDFE7; text-align:center;}
h1 { position:absolute; font-size: 70%;color: #000;font-weight: normal; text-align:right; width:auto; top:1%; right:1%; display:none}
#border {display:block; width:100%; height:5px; background-color:#FFDFE7; margin:3px 0 0 0;}

/*---------- メニュー ----------*/
#acmenu .switch { position: relative; width: 30px; height: 30px; cursor: pointer; margin:2px; margin-left: auto; padding:5px 5px 0 5px; background-color:#FFDFE7;}
#acmenu .switch:before { content: ""; position: absolute; border-top: 5px solid #000; border-bottom: 15px double #000; width: 30px; height: 5px;}
#acmenu .active:before,
#acmenu .active:after { content: ""; position: absolute; left: 15px; top: 0; border: 0; background-color: #fff; width: 2px; height: 25px; margin:0 0 5px 3px; padding:10px 2px 0 0; transform: rotate(45deg);}
#acmenu .active:after { transform: rotate(-45deg);}
#acmenu .nav { display: none;}
#acmenu a { display: block; margin-bottom: 1px; padding: 10px; font-size:1.5em; background-color: #FFDFE7; color: #000; text-decoration: none; text-align: center;}

.child { display: none;}
#mmenuback { background-color:#FFDFE7; width:100%; margin:auto; padding:0; height:40px;}
#mmenu { display:table; table-layout:fixed; text-align:center; max-width:100%; background-color:#FFDFE7; height:40px;}
#mmenu li {display:table-cell; width:100%; border-left: 1px solid #000;}
#mmenu li:last-child {border-right: 1px solid #000;}
#mmenu li a { display:block; color:#000; height:30px; padding:6px 0 4px 0; font-size:1.2em;}
#mmenu a:hover { background-color:#FB5353; color:#fff;}

/*---------- コンテンツ ----------*/
#contents { width:100%; height:auto; margin:1% 0;}
.wrapper { margin:1%;}
#wrapper { float:left; width:100%; margin:0 -305px 0 0;}
#main { display:inline-block; width:68%; margin:1%; vertical-align:top;}
#sub { display:inline-block; width:28%; border-right:1px solid #CCC; background-color:#fff; margin:0.5% 0; padding:0.5%;}
#submenu { display:inline-block; width:28%; background-color:#fff; margin:1% 0;}
.fixed { position:fixed; top:0;}
.cleafix:after { content: ""; display: block; clear: both;}
.clearfix { overflow: hidden; zoom: 1;}
#contents h2 { font-size:110%; line-height:160%; border-left:10px solid #FFDFE7; border-bottom:1px solid #000; margin:0; padding-left:2%;}
.img-center { display:block; margin:0 auto;}
.movie-wrap { margin:0 2%;}
.nav a { color: #666; text-decoration:none; text-align: center; display: block; padding:3% 0;}
.nav a:hover { background: #FFDFE7; color: #000;}
#flexbox { width:100%;display: flex;display: -moz-flex;display: -o-flex;display: -webkit-flex;display: -ms-flex;flex-direction: row;-moz-flex-direction: row;-o-flex-direction: row;-webkit-flex-direction: row;-ms-flex-direction: row; flex-wrap:wrap; justify-content:space-around;}
.btn { width:250px; text-align:center; margin:10px; background-color:#FECBCB; }
.btn a:hover img {opacity: 0.7; filter: btn(opacity=70); -ms-filter: "btn(opacity=70)";}
.img { float:left; margin:1% 3% 1% 0;}
#sns{position: absolute; width:35px; height:30px; right: 1.5%; top: 3%;}
#sns li {float: left; margin-left:5px;}
#sns li img {display: block;width: 30px;height: 30px;background: #fff;border-radius: 4px;}
panel { width: 600px;}

dl#panel { background:#FFF; width:100%; margin:0 auto;}
dl#panel dt {border-bottom: solid 1px white; background-color: #FFF; color: white; cursor: pointer; padding: 10px; font-weight: bold;}
dl#panel dd { background:#fff; margin:0; padding:20px; line-height:1.5; border: solid 1px #aaa; display:none;}

.bxslider li:hover {opacity: 0.7; filter: btn(opacity=70); -ms-filter: "btn(opacity=70)";}


/*---------- 問い合わせ-----------*/
#formWrap {width:100%;margin:0 auto;color:#555;line-height:120%;font-size:90%;}
table.formTable{width:100%;	margin:0 auto;border-collapse:collapse;}
table.formTable td,table.formTable th{	border:1px solid #ccc;	padding:10px;}
table.formTable th{	width:40%;	font-weight:normal;	background:#efefef;	text-align:left;}


/*---------- フッター ----------*/
#footer { clear:both; height:2em; font-size:80%; line-height:100%; background-color:#FFDFE7; color:#000; text-align:left; padding:1em;}
#copy { display:block; float:left; margin:0 auto;}
#fmenu { display:block; float:right;}

/*---------- PAGE TOPボタン ----------*/
.pagetop { text-align: right; margin: 0 auto;}
.pagetop a { display: inline-block; color: #000; font-size: 1.2em; vertical-align:middle; padding: 0.5em; border-radius: 5px 0 5px 0; background: #FFDFE7;}

/*---------- フェードインボタン用 ----------*/
.pagetop2 { position: fixed; bottom: 60px; right: 24px; margin: 0 auto; z-index: 200;}
.pagetop2 a {  display: table-cell; text-align: center; padding: 0.5em; color: #AAA; font-size: 1.2em; line-height: 1; border-radius: 5px; background: rgba(248,221,241,0.5); behavior: url(PIE.htc);}

/*---------- Facebook用 ----------*/
.fb-wrapper {
    position:relative;
    width:100%;
    height:0;
    padding-top:75%;}
.fb-wrapper iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}


@media screen and (min-width: 1024px) { #main { width:690px;} #submenu { width:290px;} #memmenu,#acmenu { display:none;}  #mmenu { width:1000px; max-width: 1024px; margin:0 auto;} #mmenu li { max-width: 200px;} }
@media screen and (min-width: 801px) and (max-width: 1023px) { body { margin:auto; padding:auto;} #memmenu,#acmenu { display:none;} #mmenu { width:800px; max-width: 1024px; margin:0 auto;} #mmenu li { max-width: 180px; font-size:0.7em;}}
@media screen and (min-width: 641px) and (max-width: 800px) {#container { max-width:100%; font-size:90%; } #header { max-width:100%; max-height:100%; margin:auto;} #footer { font-size:80%; height:95%;} #memmenu,#acmenu { display:none;} #mmenu { width: 100%; margin:0 auto;}  #mmenu li:last-child { border-left:0; border-right:0 ;} #mmenu li { border-left:0; border-right: 1px solid #FFF; font-size:0.7em;} p { line-height:125%;} .btn { width:160px;}}
@media screen and (min-width: 481px) and (max-width: 640px) {#container { max-width:100%; font-size:90%; } #header { max-width:100%; max-height:100%; margin:auto;} #footer { font-size:80%; height:95%;} #memmenu,#acmenu { display:none;} #submenu {width:100%;} #mmenu { width: 100%; margin:0 auto;} #mmenu li { border-left:0; border-right: 1px solid #FFF; width:20%; font-size:0.5em;} #mmenu li:last-child { border-left:0; border-right:0 ;} #wrapper,#main,#sub { float:none; width:auto; margin:0.5%;} h3 { line-height:160%;} p { line-height:120%;} .btn { width:100px;} #sns{display:none;} .flexpic{width:40%;}}
@media screen and (min-width: 240px) and (max-width: 480px) {#container { max-width:100%; font-size:80%; } #header { max-width:100%; max-height:100%; margin:auto;}  #header h1 { font-size:50%;} #mmenuback { display:none;} #mmenu { display:none;} #submenu { width:100%;} #footer { font-size:60%; line-height:1.3em;} #wrapper,#main,#sub { float:none; width:auto; margin:0.3%;} p { line-height:120%;} h3 { line-height:140%;} .movie-wrap { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;} .movie-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;} h1 { top:30%;} .btn { width:100px;} #sns{display:none;} .flexpic{width:40%;}}