@charset "UTF-8";


body  {margin: 10px;
background-color: #FFF;
font-family: 'Cairo Regular', 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif}

/*サイト名*/
.site h1 a   {color: #000000;
text-decoration: none}

.site h1  {margin: 0;
font-size: 30px}

.site img  {border: none;
margin: 10px;}

/*ヘッダー画像*/
.topimg  {width: 100%;
height: auto;
vertical-align: bottom}

/*menu*/
#menu  {
font-family: 'Nunito', sans-serif;
}

/*キャッチコピー*/
.catch  {margin: 0;
padding: 15px;
background-color: rgba(255,255,255,0.7);
font-size: 28px}

/*ヘッダー画像にキャッチコピーを載せる*/
.top  {position: relative}

.catch  {position: absolute;
bottom: 7%;
left: 3%}

/*概要*/
.gaiyou a  {display: block;
color: #000000;
text-align: center;
text-decoration: none}

.gaiyou a:after  {opacity: 0.8}

.gaiyou i  {
font-size: 48px;
height: 110px;
width: 200px;
margin: 3px;
border: 100%;
line-height: 110px;
text-align:center;
background: #3891CF;
color: #FFF;
box-shadow: inset 0 0 0 3px #FFF;
}

.gaiyou .fa-calendar  {
background-color: #F80E1C;
border: 3px solid #F80E1C;
}

.gaiyou .fa-youtube  {
background-color: #0B24F6;
border: 3px solid #0B24F6;
}

.gaiyou .fa-envelope  {
background-color: #000;
border: 3px solid #000;
opacity:
}

.gaiyou h1  {
color: #000;
margin-top: 0;
margin-bottom: 0;
padding-top: 5px;
padding-bottom: 5px;
font-size: 20px
font-weight: normal}

.gaiyou p  {margin-top: 0;
margin-bottom: 0;
padding-top: 15px;
padding-bottom: 15px;
background-color: #524e3c;
font-size: 12px}

/*お知らせ*/
.news  {padding: 20px;
border: solid 5px #efefef}

.news h1  {margin: 0;
margin-bottom: 5px;
font-size: 18px;
color: #666666}

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

.news li a  {display: block;
padding: 5px;
border-bottom: dotted 2px #dddddd;
color: #000000;
font-size: 14px;
text-decoration: none}

.news li a:hover  {background-color: #fff}

.news time   {color: #888888;
font-weight: bold}

.news a:after  {conten: "";
display: block;
clear: both}

.news time  {float: left;
width: 60px}

.news .text  {float: none;
width: auto;
margin-left: 60px}

/* SNSメニュー */
.follow ul  {margin: 0;
padding: 0;
list-style: none}

.follow li a  {display: block;
margin-bottom: 10px;
padding: 10px;
border-radius: 4px;
color: #ffffff;
font-size: 14px;
text-decoration: none}

.follow li a:hover  {opacity: 0.8}

.follow-tw  {background-color: #63bafb}
.follow-fb  {background-color: #5288f7}
.follow-fc  {background-color: #f65d4a}
.follow-ab  {background-color: #4ca135}

.follow i  {margin-right: 10px;
font-size: 24px;
vertical-align: middle}

.fc  {
display: block;
margin-right: 10px;
padding: 10px;
border-radius: 4px;
font-size: 14px;
background-color: #dddddd;
opacity: 0.8;
}

/*補足説明*/
.fi p  {margin-top: 0;
margin-bottom: 20px;
padding: 10px;
background-color: #dddddd;
font-size: 14px;
text-align: center}

.fi  {position: relative;
background: #dddddd;}

.fi:after  {top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(221, 221, 221, 0);
border-top-color: #dddddd;
border-width: 15px;
margin-left: -15px;}

/*picup*/
.picup  {
color: #EF454A;
}

/* 記事 */
.kiji h1  {margin-top: 0;
margin-bottom: 20px;
padding-left: 20px;
border-left: solid 20px #F80E1C;
font-size: 20px;
font-weight:normal}

.kiji h2  {margin-top: 50px;
margin-bottom: 20px;
border-bottom: solid 1px #dddddd;
font-size: 20px;
font-weight: normal}

.kiji h2 i  {margin-right: 7px;
color: #F80E1C}

.kiji p i  {margin-right: 7px;
color: #0B24F6}

.kiji p  {font-size: 12px;
font-weight: normal;
max-width: 640px;
margin-top: 0;
margin-bottom: 20px
}

.kiji .lead  {max-width: 100%
font-size: 20px;
color: #666666}

.kijiimg  {max-width: 100%;
height: auto;
margin-bottom: 20px}

.kijiimgd  {
max-width: 100%;
height: auto;
margin-bottom: 20px;
box-shadow: 0 0 10px #dddddd;
}

.newkiji h2  {margin-top: 50px;
margin-bottom: 20px;
font-size: 25px;
font-weight: normal;
}

.newkiji h4  {margin-top: 10px;
margin-bottom: 5px;
font-size: 20px;
font-weight: normal;
color: #9B1C38;
}


img.photo {
padding: 10px; /* パディング */
background-color: #ffffff; /* 背景色 */
border: 1px solid; /* 境界線 */
border-color: #c0c0c0 #808080 #808080 #c0c0c0; /* 境界線色（上右下左） */
}

/* パンくずしリスト */
.bread  {margin-bottom: 20px}

.bread ol  {margin: 0;
padding: 0;
list-style: none}

.bread li a  {display: inlien-block;
padding: 5px;
color: #000000;
font-size: 14px;
text-decoration: none}

.bread li a:hover  {background-color: #eeeeee}

.bread ol:after  {content: "";
display: block;
clear: both}

.bread li  {float: left;
width: auto}

.bread li:after  {content: '\003e';
margin-left: 10px;
margin-right: 10px;
color: #888888}

/*disco*/

.box8-1 p {margin-top: 23%;
background-color: #ffffff;
text-align: center;}

.box9-1 p {margin-top: 23%;
margin-bottom: 0;
background-color: #ffffff;
text-align: center;}

.box10-1 p {margin-top: 23%;
margin-bottom: 0;
background-color: #ffffff;
text-align: center;}

/* store */

.store  {width: 55px;
height: 20px;
margin-top: 15px;
margin-bottom: 0;
margin-right: 5px;
}
.store1  {
width: 60px;
height: 20px;
margin-top: 15px;
margin-bottom: 0;
margin-right: 5px;
}

/*youtube設定*/
.youtube {
position: relative;
margin: 20px 0;
padding-bottom: 56.25%;
padding-top: 30px;
overflow: hidden;
max-width: 100%;
height: auto;
}
 
.youtube iframe, .youtube object, .youtube embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/*コピーライト*/
.copyright p  {margin: 10px;
color: #666666;
font-size: 14px}

/* BOXAの下に罫線を挿入（コンテンツページのみ） */
.contents .boxA	{border-bottom: solid 1px #dddddd}

/*box5をバーの形にする*/
.box5  {padding-top: 15px;
padding-bottom:15px;
background-color: #dddddd}

/* ボックスの左右 */
.boxA, .box4, .box5, .box6, .box7, .box8-1, .box8-2,.box9-1, .box9-2,.box10-1, .box10-2,
{padding-left: 15px;
padding-right: 15px}


/* ボックスの上下 */
.boxA  {padding-top: 20px;
padding-bottom: 10px}

.box4  {padding-top: 20px;
padding-bottom: 20px}

.box4-1  {padding-bottom: 20px}

.box6  {padding-top: 20px}

.box6-1, .box6-2, .box6-3
{padding-bottom: 10px}

.box7  {padding-top: 25px;
padding-bottom: 25px}

/* スライド */

#slides {
display: none
}

#slides .slidesjs-navigation {
margin-top:5px;
}

a.slidesjs-next,
a.slidesjs-previous,
a.slidesjs-play,
a.slidesjs-stop {
background-image: url(img/btns-next-prev.png);
background-repeat: no-repeat;
display:block;
width:12px;
height:18px;
overflow: hidden;
text-indent: -9999px;
float: left;
margin-right:5px;
}

a.slidesjs-next {
margin-right:10px;
background-position: -12px 0;
}

a:hover.slidesjs-next {
background-position: -12px -18px;
}

a.slidesjs-previous {
background-position: 0 0;
}

a:hover.slidesjs-previous {
background-position: 0 -18px;
}

a.slidesjs-play {
width:15px;
background-position: -25px 0;
}

a:hover.slidesjs-play {
background-position: -25px -18px;
}

a.slidesjs-stop {
width:18px;
background-position: -41px 0;
}

a:hover.slidesjs-stop {
background-position: -41px -18px;
}

.slidesjs-pagination {
margin: 7px 0 0;
float: right;
list-style: none;
}

.slidesjs-pagination li {
float: left;
margin: 0 1px;
}

.slidesjs-pagination li a {
display: block;
width: 13px;
height: 0;
padding-top: 13px;
background-image: url(img/pagination.png);
background-position: 0 0;
float: left;
overflow: hidden;
}

.slidesjs-pagination li a.active,
.slidesjs-pagination li a:hover.active {
background-position: 0 -13px;
}

.slidesjs-pagination li a:hover {
background-position: 0 -26px;
}

#slides a:link,
#slides a:visited {
color: #333;
}

#slides a:hover,
#slides a:active {
color: #9e2020;
}

.navbar {
overflow: hidden;
}

/*End SlidesJS Optional*/

/*SlidesJS Required: These styles are required if you'd like a responsive slideshow*/

#slides {
display: none;
}

.container {
margin: 0 auto;
}

/*メールフォーム*/
#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:30%;
font-weight:normal;
background:#efefef;
text-align:left;
}


/* ########### 359px以下 ########### */
@media(max-width: 359px) {
/*サイト名*/
.site img  {width: 225px;
height: auto}

#formWrap {
width:auto;
}
table.formTable{
width:auto;
}
table.formTable th{
width:auto;
}

/* box6 */
.box6 {display: block;
margin: 60px;
}

.box6-1 .box6-2 .box6-3 {display: block;
position: center;
margin: 50px
}

}

/* ########### 599px以下 ########### */
@media(max-width: 599px){
/*ナビゲーション*/
#menu  {display: none}

.menu li a  {padding: 10px 7px;
font-size: 11px}

/*キャッチコピー*/
.catch  {padding: 5px 10px;
font-size: 12px}

.container {
width: auto;
}

.box8-1 i  {
width: 20%;
}

#formWrap {
width:auto;
}
table.formTable{
width:auto;
}
table.formTable th{
width:auto;
}

img.photo {width:300px;
height:242px}



/* box6 */
.box6 {display: block;
margin: 60px
}

}

/* ########### 767px以下 ########### */
@media (max-width: 767px) {
/*トングル*/
#menubtn  {padding: 6px 12px;
border: solid 1px #aaaaaa;
border-radius: 5px;
background-color: #ffffff;
position: absolute;
top: 20px;
right: 15px;
cursor: pointer}

#menubtn:hover  {background-color: #dddddd}

#menubtn:focus  {outline: none}

#menubtn i  {color: #888888;
font-size: 18px}

#menubtn span  {display: inline-block;
text-indent: -9999px}


/*ナビケーションメニュー(縦並び)*/
.menu ul  {margin: 0;
padding: 0;
list-style: none}

.menu li a  {display: block;
padding: 5px;
color: #000000;
font-size: 14px;
text-decoration: none}

.menu li a:hover  {background-color: #eeeeee}

.box8-1 p {
margin-top: 7.6%;
}

.box8-1 i  {
width: 30%;
}

.box9-1 p {
margin-top: 7.6%;
}

.box9-1 i  {
width: 30%;
}

/* BOX10-1、BOX10-2、を横に並べる設定 */
.box10:after  {
content: "";
display: block;
clear: both}

.box10-1  {
float: left;
width: auto;
margin-right: 5%}

.box10-2  {
float: left;
width: auto;
margin-left: 5%}

.container {
width: auto;
}

#formWrap {
width:auto;
}
table.formTable{
width:auto;
}

.box6  {
display: block;
}

.box6-1  {
width: 100%;
}

.box6-2  {
width: 100%;
}

.box6-3  {
width: 100%}

}

/* ########### 768px以上 ########### */
@media (min-width: 768px) {
/* トグルボタン */
#menubtn  {display: none}

/* ナビゲーション */
#menu  {display: block !important}

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

.menu li a  {display: block;
padding: 10px 15px;
color: #000000;
font-size: 14px;
text-decoration: none}

.menu li a:hover  {background-color: #eeeeee}

.menu ul:after  {content: "";
display: block;
clear: both}

.menu li  {float: left;
width: auto}

img.photo {width:600px;
height:849px}

/* BOX1とBOX2を横に並べる設定 */
.boxA:after  {content: "";
display: block;
clear: both}

.box1  {float: left;
width: auto}

.box2  {float: right;
width: auto}

/*box4-1,4-2を横に並べる設定*/
.box4:after  {content: "";
display: block;
clear: both}

.box4-1  {float: left;
width: 70%;
padding-right: 35px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box}

.box4-2  {float: left;
width: 30%}

/* BOX6-1、BOX6-2、BOX6-3を横に並べる設定 */
.box6:after  {content: "";
display: block;
clear: both}

.box6-1  {float: left;
width: 32%;
margin-right: 2%}

.box6-2  {float: left;
width: 32%;
margin-right: 2%}

.box6-3  {float: left;
width: 32%}

/* BOX7-1とBOX7-2を横に並べる設定 */
.box7:after  {content: "";
display: block;
clear: both}

.box7-1 {float: right;
width: 80%;
padding-left: 50px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box}

.box7-2  {float: left;
width: 20%}

.box8-1 i  {
width: 10%;
}

.box8-1 p {margin-top: 5%;}

.box9-1 i  {
width: 10%;
}

.box9-1 p {margin-top: 5%;}

/* BOX10-1、BOX10-2、を横に並べる設定 */
.box10:after  {content: "";
display: block;
clear: both}

.box10-1  {float: left;
width: 32%;
margin-right: 5%}

.box10-2  {float: left;
width: 32%;
margin-left: 5%}

.container {
width: auto;
}

#formWrap {
width:auto;
}
table.formTable{
width:auto;
}

}


/* ########### 1190px以上 ########## */
@media(min-width: 1190px){

/* 全体の横幅を固定 */
.box2, .box3, .box4, .boxA-inner, .box5-inner, .box6, .box7, .box8,.box9,.box10,.container,
{width: 1140px;
margin-left: auto;
margin-right: auto}

/* BOX Aの下に罫線を挿入 */
.boxA  {margin-bottom: 20px;
border-bottom: solid 1px #dddddd}

/* BOX8-1、BOX8-2、を横に並べる設定 */
.box8:after  {
content: "";
display: block;
clear: both;
}

.box8-1  {
float: left;
width: 32%;
margin-right: 5%;
}

.box8-2  {
float: left;
width: 32%;
margin-left: 5%;
}

.box8-1 i  {
width: 40%;
}

/* BOX9-1、BOX9-2、を横に並べる設定 */
.box9:after  {content: "";
display: block;
clear: both}

.box9-1  {float: right;
width: 32%;
margin-right: 30%;
}

.box9-2  {float: left;
width: 32%;
margin-right: 5%;
}

/*メールフォーム*/
#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:30%;
font-weight:normal;
background:#efefef;
text-align:left;
}

}