body  {
    font-family: Helvetica Neue,Helvetica,YuGothic,Yu Gothic,'ヒラギノ角ゴ Pro W3',Hiragino Kaku Gothic Pro,"メイリオ",Meiryo,"ＭＳＰゴシック",sans-serif;
    background: #ffffff;
}

 a:hover { 
	filter: alpha(opacity=70);
	opacity: 0.7; 
}	

/*--------- 600px ~ ---------*/
@media (max-width: 600px) {
.pc_item {display: none;}
}


#flat-logo {
	width: 100%;
    max-width: 800px;
 	display: flex;
    justify-content: space-between; /*均等に間隔をあける*/
    align-items: center;     /*中央揃え*/
    margin: 130px auto 0 ;
}
#flat-logo .left {width: 270px;}
#flat-logo .left img{
    width: 100%;
    height: auto;
}
#flat-logo .right {width: 270px;}
#flat-logo .right img{
    width: 100%;
    height: auto;
}

section {
	width: 100%;
    max-width: 800px;
    margin: 0 auto 100px ;
    text-align: left;
}
section img{
    width: 100%;
    height: auto;
}

/*--------- 768px ~ ---------*/
@media (max-width: 768px) {
#flat-logo {width: 95%; margin: 90px auto 0 ;}
#flat-logo .left {width: 200px;}
#flat-logo .right {width: 200px; }
section {width: 95%;}
}
/*--------- 600px ~ ---------*/
@media (max-width: 600px) {
#flat-logo {margin: 80px auto 0 ;}
#flat-logo .left {width: 130px;}
#flat-logo .right {width:130px;}
section {width: 95%; margin: 0 auto 60px ;}
}


#about {margin-top: 80px;}
#about .item {margin-bottom: 50px;}
#about .item-3 {margin-bottom: 80px;}

#about .item-2  {
	width: 100%;
    line-height: 1.9;
 	display: flex;
    justify-content: left; 
    color: #555;
    margin-bottom: 50px;
}
#about .item-2 .left {
	width: 120px;
    margin-right: 40px;
}
#about .item-2 .left img{
    width: 100%;
    height: auto;
}

#about .item-2 .right {
	width : calc(100% - 160px) ;
}
#about .item-2 h3 {
    color: #003366;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.9;
    margin-bottom: 20px;
}
#about .item-2 ol {
    list-style-type: decimal;
    margin-left: 1.5em;
}

/*--------- 768px ~ ---------*/
@media (max-width: 768px) {
#about {margin-top: 50px;}
#about .item  {margin-bottom: 40px;}
#about .item-3 {margin-bottom: 60px;}
#about .item-2  {margin-bottom: 40px;}
#about .item-2 .left {
	width: 100px;
    margin-right: 20px;
}
#about .item-2 .right {
	width : calc(100% - 120px) ;
}
#about .item-2 h3 {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 10px;
}
}
/*--------- 600px ~ ---------*/
@media (max-width: 600px) {
#about {margin-top: 40px;}
#about .item {margin-bottom: 25px;}
#about .item-3 {margin-bottom: 40px;}
#about .item-2 .left {
	width: 80px;
    margin-right: 15px;
}
#about .item-2 .right {
	width : calc(100% - 95px) ;
}
#about .item-2 h3 {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 10px;
}
}


#guide {
    background-image: url(../img/line.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center bottom;
    padding-bottom: 50px;
    margin-bottom: 50px;
}

#guide h2{
	width : calc(100% - 60px) ;
    color: #003366;
    font-size: 18px;
    padding: 10px 30px;
    background: #faee5e;
    border-radius: 24px;
    margin-bottom: 20px;
}
#guide .guide_txt {
    font-size: 18px;
    text-align: center;
    margin-bottom: 40px;
}
#guide .guide_txt p {
    margin-bottom: 20px;
}
#guide .guide_txt span {
    font-size: 13px;
}
#guide .guide_txt2 {
    font-size: 14px;
    text-align: center;
    margin-bottom: 30px;
}

/*--------- 768px ~ ---------*/
@media (max-width: 768px) {
#guide h2{
	width : calc(100% - 60px) ;
    font-size: 16px;
    padding: 5px 30px;
    border-radius: 20px;
    margin-bottom: 15px;
}
#guide .guide_txt {
    font-size: 16px;
    text-align: center;
    margin-bottom: 40px;
}
}


/*--------- ギャラリー  ---------*/

#gallery h2{
	width: 100%;
    color: #003366;
    font-size: 22px;
    letter-spacing: 5px;
    text-align: center;
    margin-bottom: 10px;
}
#gallery .eiji{
	width: 100%;
    color: #003366;
    font-size: 14px;
    letter-spacing: 3px;
    text-align: center;
    margin-bottom: 30px;
}

.gallery_contents {
	width: 100%;
 	display: flex;
    flex-wrap: wrap;         /*折り返し有り・複数行*/
    justify-content: space-between; /*均等に間隔をあける*/
    margin-bottom: 50px;
}
.gallery_contents::before{
  content:"";
  display: block;
  width:22%;
  order:1;
}
.gallery_contents::after{
  content:"";
  display: block;
  width:22%;
}
.gallery_contents .item {
    width: 22%;
    margin-bottom: 25px;
}
.gallery_contents .item img{
  width: 100%;
  height: 180px;
  object-fit: cover; 
   border-radius: 10px;
}
#gallery .gallery_contents p{
	width: 100%;
    font-size: 13px;
    margin-top: 5px;
    text-align:justify;
}

#gallery .insta a {
	width: 100%;
    margin-bottom: 50px;
}
#gallery .insta a {
	width : calc(100% - 64px) ;
 	display: flex;
    flex-wrap: wrap;         /*折り返し有り・複数行*/
    justify-content: space-around;  /*均等に間隔をあける・両端にも間隔をあける*/
    align-items: center;     /*中央揃え*/
	border: 2px solid #334847;
    border-radius: 20px;
	padding: 20px  ;
}
#gallery .insta a:hover {
	border: 2px solid #faee5e;
    background: #faee5e;
	filter: alpha(opacity=100);
	opacity: 1; 
}

#gallery .insta .icon{
	width: 100px;
}
#gallery .insta .insta_txt{
    color: #003366;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 5px;
    text-align: center;
}

/*--------- 768px ~ ---------*/
@media (max-width: 768px) {
.gallery_contents::before{
  content:"";
  display: block;
  width:31%;
  order:1;
}
.gallery_contents::after{
  content:"";
  display: block;
  width:31%;
}
.gallery_contents .item {
    width: 31%;
    margin-bottom: 20px;
}
.gallery_contents .item img{
  width: 100%;
  height: 180px;
}
}
/*--------- 600px ~ ---------*/
@media (max-width: 600px) {
.gallery_contents::before{
  content:"";
  display: block;
  width:46%;
  order:1;
}
.gallery_contents::after{
  content:"";
  display: block;
  width:46%;
}
.gallery_contents .item {
    width: 48%;
    margin-bottom: 15px;
}
.gallery_contents .item img{
  width: 100%;
  height: 150px;
}
}
/*--------- 500px ~ ---------*/
@media (max-width: 500px) {
#gallery .insta a {
	width : calc(100% - 34px) ;
	padding: 5px 15px 20px  ;
}
#gallery .insta .icon{
	width: 80px;
}
#gallery .insta .insta_txt{
    width: 100%;
    font-size: 16px;
    letter-spacing: 3px;
    text-align: center;
}
}

/*--------- Q&A  ---------*/

#qanda {
    background-image: url(../img/line.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center bottom;
    padding-bottom: 50px;
    margin-bottom: 50px;
}
#qanda h2{
	width : calc(100% - 60px) ;
    color: #003366;
    font-size: 18px;
    padding: 10px 30px;
    background: #faee5e;
    border-radius: 24px;
    margin-bottom: 20px;
}
#qanda .contents{
    max-width: 740px;
    margin: 30px auto 0;
}

#qanda .qanda_txt_q {
 	display: flex;
    justify-content: left; /*均等に間隔をあける*/
    margin-bottom: 20px;
}
#qanda .qanda_txt_q .left{
	color: #003399;
    font-size: 16px;
    font-weight: 700;
}
#qanda .qanda_txt_q .right{
    font-size: 14px;
    line-height: 1.9;
}
#qanda .qanda_txt_a {
 	display: flex;
    justify-content: left; /*均等に間隔をあける*/
    margin-bottom: 40px;
}
#qanda .qanda_txt_a .left{
	color: #cc0000;
    font-size: 16px;
    font-weight: 700;
}
#qanda .qanda_txt_a .right{
    font-size: 14px;
    line-height: 1.9;
}

@media (max-width: 768px) {
#qanda h2{
	width : calc(100% - 60px) ;
    font-size: 16px;
    padding: 5px 30px;
    border-radius: 20px;
    margin-bottom: 15px;
}
}


/*--------- バナー  ---------*/
#banner h2{
	width: 100%;
    color: #003366;
    font-size: 18px;
    text-align: center;
    margin-bottom: 20px;
}
.banner_contents {
	width: 100%;
 	display: flex;
    justify-content: space-between; /*均等に間隔をあける*/
}
.banner_contents .item {
    height: 76px;
}
.banner_contents .item img {
    width: auto;
    height: 100%;
}
#banner {
    max-width: 810px !important;
}


/*--------- 768px ~ ---------*/
@media (max-width: 768px) {
.banner_contents .item {
    height: 60px;
}
}
@media (max-width: 600px) {
#banner {
    margin-bottom: 20px;
}
.banner_contents {
    flex-wrap: wrap;   /*折り返し有り・複数行*/
}
.banner_contents .item {
    width: 45%;
    height: auto;
    margin-bottom: 25px;
}
.banner_contents .item img {
    width: 100%;
    height: auto;
}

}