﻿

/* ------------------------
basic
------------------------*/
body { 
	font-family: 'Noto Sans JP', sans-serif; color: #333; }
input,textarea { font-family: 'Noto serif JP', sans-serif; }

@media screen and (min-width: 651px) {
	h1 { font-size: 2.5em; letter-spacing: 1.6px; }
	h2 { font-size: 1.7em; letter-spacing: 1.6px; }
	h3 { font-size: 1.4em; letter-spacing: 1.2px; }
	h3 span { font-size: 0.8em; }
}

@media screen and (max-width: 650px) {
	h1 { font-size: 2.0em; }
	h2 { font-size: 1.5em; }
	h3 { font-size: 1.2em; }
	h3 span { font-size: 0.8em; }
}

a { color: #096d9b; }
a:hover { color: #ca0000; }




/* ------------------------
nav
------------------------*/
/* main nav */
nav a { text-decoration: none; color: #ffffff; transition: 0.2s; text-align: center; line-height: 160%; font-weight: bold;}
nav a:hover { filter: opacity(0.8); color: #fff; }

@media screen and (min-width: 1000px) {
#header { width: 100%; background: #fafafa;}
	#header .logo {	width: 100%; margin: 42px auto 52px; max-width:469px; height: 71x;}
#header .logo img {	width: 100%;	max-width: 469px;}
	.above_the_fold { width: 100%; margin: 0px auto; height: 60px; background: #096d9b; padding: 0px;}
	.above_the_fold nav { max-width: 1400px; height: 60px; margin: 0 auto;}
	.above_the_fold nav ul { display: flex; display: -webkit-flex; justify-content: space-between;  justify-content: space-evenly;}
	.above_the_fold nav ul li { text-align: center; line-height:60px; color: #096d9b; border-right: 1px solid #FFFFFF; margin: 0 auto; padding: 0;	width: calc(100%/6);}
	.above_the_fold nav ul:first-child { border-left: 1px solid #FFFFFF;}
	
	
}
.m_photo { width: 100%; }

@media screen and (max-width: 999px) {
#header { width: 100%; background: #fafafa;}
	#header .logo img {	width: 100%; max-width: 300px; margin: 10px;}
	.cd-breadcrumb {  display: none; }
	nav dl dd { width: 100%; }
	.above_the_fold nav .logo img { max-width: 200px; width: 100%;}

}

/* drawer nav */
.drawer-toggle { display: none; }

@media screen and (max-width: 999px) {
	.drawer-menu { z-index: 30; }
	.drawer-menu p { font-family: 'Noto Sans JP', sans-serif; font-size: 0.9em; }
	.drawer-nav ul { background: rgba(255,255,255,.85); z-index: 30; }
	.drawer-nav ul li { padding-left: 10px; padding-right: 10px; border-bottom: 1px #096d9b dotted; color: #096d9b; }
	.drawer-nav ul li a { display: block; padding: 15px 10px 15px 20px; text-decoration: none;  font-size: 1em;  color: #096d9b;}
	.drawer-nav ul li a:hover { color: #215508; }
}


/* ------------------------
common parts
------------------------*/
.main_title { margin: 15px auto 30px; font-size: 300%; padding-bottom: 15px; color: #096d9b; border-bottom: 1px solid #096d9b;}
.stitle {  width: 125px;  height: 125px;  border-radius: 50%;  background: #096d9b; vertical-align: middle; position: relative; }
.stitle .one { color: #FFFFFF; text-align: center; font-size: 120%; position: absolute; width: 125px;  height: 125px; line-height: 125px;}
.stitle .two { color: #FFFFFF; text-align: center; font-size: 120%; position: absolute; top:25%; left: 20%;}
.content_2col {	display: flex;	display: -webkit-flex;	justify-content: space-between;	-webkit-justify-content: space-between;	flex-wrap: wrap;}
.content_2col dt {	width: 30%;}
.content_2col dd {	width: 65%;}

@media screen and (max-width: 999px) {
.content_2col dt {	width: 100%;}
.content_2col dd {	width: 100%;}}

.c_caption { border-top: 3px #506400 double; border-bottom: 3px #506400 double; padding-top: 8px; padding-bottom: 8px; color: #506400; font-size: 1.2em; }

.list_number { display: list-item; margin-left: 15px; }
.list_number li { padding-left: 5px; list-style-type: decimal; margin-bottom: 5px; }
.list_min { display: flex; }

.pagetop01 a { font-family: 'Neuton', serif; }

#m_images img {width: 100%; }


@media screen and (min-width: 651px) {
	.pr_text { letter-spacing: 1.5px; line-height: 170%; }
	.sub_caption { font-size: 1.3em; }
	.new_member { padding: 30px; }
	.list_min { flex-wrap: nowrap; align-items: center; }
	.list_min dt { width: 10%; text-align: center; border: 1px #FFF solid; padding: 2px; margin-right: 5px; }
	.list_min dd { padding: 2px; margin-right: 10px; }
}

@media screen and (max-width: 650px) {
 .page_title { width: 90%; margin: 15px auto; font-size: 200%; text-align: center; }
	.pr_text { letter-spacing: 1px; }
	.sub_caption { font-size: 1.2em; }
	.new_member { padding: 15px; }
	.new_member ul li { padding-top: 5px; padding-bottom: 5px; }
	.compe_table table { font-size: 0.85em; }
}

/* ------------------------
box
------------------------*/
/* basebox */
@media screen and (min-width: 651px) {
	.container { min-width: 900px; font-size: 1.45em; }
	.limit_box { max-width: 1400px; padding: 0px; margin: 10px auto 50px auto; width: 90%; overflow: auto;}
	.wide_box { margin: 100px auto;}
}

@media screen and (max-width: 650px) {
	.container { font-size: 1.3em; }
	.limit_box { margin: 20px 3%; }
	.limit_box_member { margin: 20px 3%; }
	.wide_box { margin: 30px auto; }
}

/* ------------------------
footer
------------------------*/
footer { padding: 0% 0%;}
footer a {	text-decoration: none;	color: #ffffff;	font-size: 80%;}
footer a:hover {	color: #ffffff;	text-decoration: underline;}

	.footer { width: 100%; margin: 0px auto; height: 60px; background: #096d9b; padding: 0px;}
	.footer nav { max-width: 1400px; height: 60px; margin: 0 auto;}
.footer nav ul { display: flex; display: -webkit-flex; justify-content: space-between;  justify-content: space-evenly;}
	.footer nav ul li { text-align: center; line-height:60px; color: #096d9b; font-size: 100%; border-right: 1px solid #FFFFFF; margin: 0 auto; padding: 0;	width: calc(100%/6);}
	.footer nav ul:first-child { border-left: 1px solid #FFFFFF;}

	.footer_toppage { width: 100%; margin: 0px auto; height: 60px; background: #d3eeff; padding: 0px; text-align: center;}
	.footer_toppage a {	text-decoration: none;	color: #096d9b;	}
	.footer_toppage a:hover {	color: #096d9b;	text-decoration: underline;}


@media screen and (max-width: 999px) {
	.footer { display: none;}
}

/* ===========================
inquiry_box
============================*/

.inquiry_box_small { position: fixed; bottom: 0; z-index: 100; background: rgba(15,26,29,0.9); color: #FFF; width:100%; }
.inquiry_box_small ul { display: flex; }
.inquiry_box_small ul li { text-align: center; flex-grow: 1; width: 33.3%; }
.inquiry_box_small ul li div { padding: 5px 0; text-align:center; }
.inquiry_box_small img { max-width: 30px;}
.inquiry_box_small a { color: #FFF; text-decoration: none; }


/* ------------------------
top
------------------------*/
	/*メンバー連絡*/
.member_box { background: #000000; padding: 5%; text-align: center; font-size: 120%; color: #FFFFFF; overflow: auto; }
.member_box img { margin: 10px;  vertical-align: middle; max-width: 324px;} 
.member_box span { margin: 10px;} 

.top_content {  width: 100%; max-width: 1400px; padding-bottom: 0px; margin: 0 auto 25px;}
.top_content { display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; flex-wrap: wrap; -webkit-flex-wrap: wrap;
  align-items: stretch; }
.top_content dd { width: 30%; }

.top_bnr_cen {  width: 100%; max-width: 1400px; padding-bottom: 0px; margin: 0 auto;}
.top_bnr_cen { display: flex; display: -webkit-flex; justify-content: space-around; -webkit-justify-content: space-around; flex-wrap: nowrap; -webkit-flex-wrap: nowrap;  }
.top_bnr_cen li { margin: 1%; }
.top_bnr_cen img { width: 100%; max-width: 400px;}

@media screen and (max-width: 999px) {
	.top_bnr_cen {  width: 90%; padding-bottom: 0px; margin: 0 auto;}
.top_bnr_cen { display: flex; display: -webkit-flex; justify-content: space-around; -webkit-justify-content: space-around; flex-wrap: wrap; -webkit-flex-wrap: wrap;  }
.top_bnr_cen li { margin: 1%; }
.top_bnr_cen img { width: 100%; max-width: 400px;}
	
	.top_content {  width: 90%; max-width: 1400px; padding-bottom: 0px; margin: 0 auto 25px;}
.top_content { display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; flex-wrap: wrap; -webkit-flex-wrap: wrap;
  align-items: stretch; }
.top_content dd { width: 100%; }
}
	
/* news */
.news ul { padding: 5px;	margin-top: 15px;	margin-bottom: 15px; width: 100%;}
.news li span {	 float: left; margin-right: 15px;}
.news li {	margin: 0 10px; border-bottom: 1px dotted #CCCCCC; padding-bottom: 10px; margin-bottom: 10px;}

@media screen and (min-width: 651px) {
.news ul li {	margin: 0 10px; border-bottom: 1px dotted #CCCCCC; padding-bottom: 10px; margin-bottom: 10px;}
}

@media screen and (max-width: 650px) {
.news ul li {	margin: 0 10px;}
}


/* pr_box */
.pr_box_contents01{ background:url(../../images/common/bg01.png) repeat; position: relative; margin-bottom: 10%; min-height: 500px; font-size: 200%; }
.pr_title { font-size:150%; color: #ffffff; margin:30px auto 30px; line-height: 180%; text-align: left;}	
.pr_box_text { position: absolute;  left: 45%; color: #FFFFFF; line-height: 200%;text-decoration: none;  z-index: 9999; display: inline-block; margin: 30px; }
.pr_box_img {position: absolute;  left: 0; top: 50px; width: 40%; }
.pr_box_img img { max-width: 1000px; width: 100%;}

@media screen and (max-width: 999px) {
	.pr_box_contents01{ background:url(../../images/common/bg01.png) repeat; position: relative; margin-bottom: 10%; min-height: 500px; font-size: 150%; }
.pr_title { font-size:120%; color: #ffffff; margin:30px auto 30px; line-height: 180%; text-align: left;}	
.pr_box_text { position: static;  left: 45%; color: #FFFFFF; line-height: 200%;text-decoration: none;  z-index: 9999; display: inline-block; margin: 30px; }
.pr_box_img {position: static;  left: 0; top: 50px; width: 100%; }
.pr_box_img img { max-width: 1000px; width: 100%;}
}



/* ------------------------
content
------------------------*/

/* course */
.layout img { max-width: 1022px; width: 100%; }

.title {margin-bottom: 20px; margin-top: 15px;}
.title .jpn { color: #8eae0d; margin-bottom: 15px; font-size: 120%; }
.title .eng { font-size: 180%; font-family: Georgia, "Times New Roman", Times, "serif"; font-style: italic; }

@media (max-width: 650px) {
    .table-scroll {
        overflow-x: scroll;
    }
}


/* newmember_box */
.newmember_box .newmember_box_bg { background: rgba(255,255,255,0.7); padding: 15% 5%; }

/*restaurant*/
.restaurant img{width:100%;border-radius:5px;}
.restaurant p{margin-top:10px;text-align:center; font-size: 120%;}
.restaurant li{margin-bottom:15px;}
.lunch{display:flex;flex-wrap:wrap;justify-content:space-between;}
.lunch li{width:33%;}
.side{display:flex;flex-wrap:wrap;justify-content:space-between;}
.side li{width:24.8%;}

@media screen and (max-width:650px){
	.lunch li{width:100%;}
	.side li{width:49.5%;}
}

.rest_list { display: flex; display: -webkit-flex; flex-wrap: wrap; justify-content: space-between; -webkit-justify-content: space-between;  }
.rest_list li{ width:48%; border-bottom: 1px dotted #cccccc; padding-bottom: 10px; margin-bottom: 10px; }
.rest_list li span { float: right; }


@media screen and (min-width: 651px) {
	.pr_block { padding-top: 45%; }
	.pr_block .pr_list { display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; margin-top: 30px; }
	.pr_block .pr_list dd { width: 49%; }
	.pr_gallery li { width: 25%; }
	.rest_list li { width: 48%; margin-bottom: 30px; }
	.breakfast { flex-wrap: nowrap; }
	.breakfast li { width: 19.5%; }
	.breakfast .m_end div { padding: 0 10px; }
	.season { flex-wrap: nowrap; }
	.season li { width: 24.5%; }
	.season li div { padding: 10px 20px; }
	.season li .title { font-size: 120%; border-bottom: 1px #EEE solid; padding-bottom: 5px; margin-bottom: 10px; }
	.season li .price { text-align: right; margin-top: 10px; }
	.four_two li { width: 24.5%; margin-bottom: 30px; }
	.two_one li { width: 48%; margin-bottom: 30px; }
	.three_one li { width: 32%; margin-bottom: 30px; }
	.sidemenu li { width: 19.5%; margin-bottom: 30px; }
}

@media screen and (max-width: 650px) {
 .pr_block { padding-top: 60%; }
	.pr_block .pr_bg { margin-left: 0%; margin-right: 0%; padding: 30px 20px; }
	.pr_block .pr_list { margin-top: 10px; }
	.pr_block .pr_list dd { margin-bottom: 30px; }
	.pr_block .pr_list ul li { padding: 0 0; }
	.pr_gallery li { width: 50%; }
	.rest_list li { margin-bottom: 20px; }
	.breakfast { flex-wrap: wrap; }
	.breakfast li { width: 49.5%; margin-bottom: 20px; }
	.breakfast li.m_end,.four_two li.m_end { width: 100%; }
	.season { display: block; }
	.season li { width: 100%; margin-bottom: 10px; }
	.season li .title { font-size: 110%; margin-bottom: 5px; text-align: center; }
	.season li .price { text-align: right; margin-top: 5px; margin-bottom: 20px; }
	.four_two li { width: 49%; margin-bottom: 30px; }
	.two_one li { width: 100%; margin-bottom: 30px; }
	.three_one li { width: 100%; margin-bottom: 30px; }
	.sidemenu li { width: 49%; margin-bottom: 30px; }
}

/* download */
.download_box { display: flex; justify-content: space-between; border: 5px #CCC solid; padding: 20px; }
.download_box dt { width: 70%; }
.download_box dd { width: 29%; }

@media screen and (max-width: 650px) {
	.download_box { display: block; padding: 10px; }
	.download_box dt { width :100%; }
	.download_box dd { width :100%; }
}

/* Underlayer */
.Underlayer_box .inner { background: rgba(255,255,255,0.9); }
.Underlayer_box_narrow .inner { background: rgba(255,255,255,0.95); }

@media screen and (min-width: 651px) {
	.Underlayer_box { max-width: 1200px; margin: 70px auto; }
	.Underlayer_box .inner { padding: 50px; }
	.Underlayer_box_narrow { max-width: 900px; margin: 70px auto; }
	.Underlayer_box_narrow .inner { padding: 50px; }
}

@media screen and (max-width: 650px) {
	.Underlayer_box { margin: 20px 3%; padding-top: 30%; }
	.Underlayer_box .inner { padding: 30px 15px; }
	.Underlayer_box_narrow { margin: 20px 3%; padding-top: 30%; }
	.Underlayer_box_narrow .inner { padding: 30px 15px; }
}



@media screen and (min-width: 651px) {
	.h1_box { background-size: 100%; }
	.h1_box_underlayer { padding: 4%; }
}

@media screen and (max-width: 650px) {
	.h1_box { background-size: cover; }
}

/*---------------------------------------------------
 Page Top Btn
--------------------------------------------------- */
#pageTop {
width:50px;
height:50px;
position:fixed;
bottom:0px;
right:0px;
z-index:999;
}
* html #pageTop {
position:absolute;
margin-top:expression(0 - parseInt(this.offsetHeight / 2) + (document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
margin-left:expression(0 - parseInt(this.offsetWidth / 2) + (document.documentElement && document.documentElement.scrollLeft || document.body.scrollLeft) + 'px');
}

#pagetopComp_sm a {
width:100%;
height:20px;
position:fixed;
bottom:0px;
right:0px;
z-index:999;
background:#071a4e;
color:#ffffff;
text-align:center;
text-decoration:none;
padding:3px 0px;
}

/*reservation*/
.reserve_box li.reserve_box_child{ border:5px #EEE solid; padding:2%;}

@media screen and (min-width:1000px){
	.reserve_box{display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between;}
	.reserve_box li.reserve_box_child{width:48%;margin-bottom:50px;}
}
@media screen and (max-width:999px){
	.reserve_box li.reserve_box_child { margin-bottom:15px;}
	.reserve_box li.reserve_box_child { width:100%;margin-bottom:50px;}
}

/*---------------------------------------------------
 online bttn
--------------------------------------------------- */
#onlineBttn {
width:65px;
height:236px;
position:fixed;
top:150px;
right:0px;
z-index:999;
}
* html #onlineBttn {
position:absolute;
margin-top:expression(0 - parseInt(this.offsetHeight / 2) + (document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
margin-left:expression(0 - parseInt(this.offsetWidth / 2) + (document.documentElement && document.documentElement.scrollLeft || document.body.scrollLeft) + 'px');
}

#weatherBttn {
width:65px;
height:68px;
position:fixed;
top:386px;
right:0px;
z-index:999;
}
* html #weatherBttn {
position:absolute;
margin-top:expression(0 - parseInt(this.offsetHeight / 2) + (document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
margin-left:expression(0 - parseInt(this.offsetWidth / 2) + (document.documentElement && document.documentElement.scrollLeft || document.body.scrollLeft) + 'px');
}

/*event*/
.event_bg{background:url("../images/event/event_bg.jpg") no-repeat center center;background-size:cover;}
.event{}
.event {display:flex;justify-content:space-between;align-items:center;	flex-wrap: wrap;}
.event dl {width:45%;border:3px #EEE double;margin-top:20px;border-radius:10px;}
.event dl dt img{width:100%;border-radius:10px;}
.event .title{font-size:1.8rem;border-top:3px #506400 double;border-bottom:3px #506400 double;padding:8px 0;margin-top:5px;margin-bottom:5px;color:#506400;}
.event .fee{font-size:1.2rem; margin-bottom: 10px;}
.event span{font-size:1rem;}

@media screen and (min-width:651px){
	.event dl {padding:20px;}
	.event table th{width:20%;}
	.event {display:flex;justify-content:space-between;align-items:center;}
	.event dl dd{width:100%;}
}

@media screen and (max-width:650px){
	.event dl {padding:10px;}
.event dl {width:100%;border:3px #EEE double;margin-top:20px;border-radius:10px;}
	.event dl dt{margin-bottom:15px;}
	.event table th{display:block;text-align:left;}
	.event table td{display:block;}
.event .title{font-size:1.4rem;}
	.event .fee{font-size:1rem; margin-bottom: 10px;}
.event span{font-size:0.8rem;}
}

/* news_box */
@media screen and (min-width: 651px) {
	.news_box {
		width: 100%;
		max-width: 950px;
		margin: auto;
	}
}

@media screen and (max-width: 650px) {
		.news_box {
		width: 100%;
	}
}
	
	
	
/* hole_box */
.hole_box { margin: 30px auto;
}
.hole_box .hole_nav {
	display: flex;
	display: -webkit-flex;
	align-items: baseline;
}
.hole_box .hole_nav li {
	width: 48%;
	text-align: center;
	margin-right: 1%;
}
.hole_box .hole_nav li a {
	display: block;
	background: #000;
	padding: 20px 10px;
	text-decoration: none;
	color: #FFF;
}
.hole_box .hole_nav li a.select {
	background: rgba(255,255,255,0.9);
	color: #000;
	border-radius: 10px 10px 0 0;
}
.hole_box .hole_nav li a:hover {
	background: #555;
	color: #FFF;
}
.hole_title {
	font-family: 'Neuton', serif;
}
.hole_box .swiper-container {
	background: rgba(255,255,255,0.9);
}

@media screen and (min-width: 651px) {
.hole_box {
	max-width: 1200px;
	margin: 70px auto;
}
.hole_box .hole_nav li {
	font-size: 1.8em;
}
.hole_box .layout_img {
	margin-top: 3%;
}
.hole_box .swiper-slide dl {
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
}
.hole_box .swiper-slide dl dt {
	width: 60%;
}
.hole_box .swiper-slide dl dd {
	width: 38%;
}
.hole_box .swiper-container li .slide-inner {
	padding: 30px;
}
}

@media screen and (max-width: 650px) {
.hole_box {
	margin: 50px 2%;
	padding-top: 50px;
}
.hole_box .hole_nav li a {
	padding: 10px 10px;
}
.hole_box .layout_img {
	margin-top: 20px;
}
.hole_box .swiper-slide dl {
	display: block;
}
.hole_box .swiper-container li .slide-inner {
	padding: 15px;
}
.ueda_image img {
	width: 100px;
}
}


/* ===========================
お知らせ枠
============================*/
.oshirase, .oshirase * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	word-wrap: break-word;
}

.oshirase { border-style:solid; border-width:2px; border-radius:0.4em; padding:1em 1.5em; margin:0 auto 1em; width:100%; max-width:1200px; }
.oshirase_contents { background-color:hsla(0,0%,100%,0.8); padding:1rem; margin:0; border-radius:0.4rem; }
.oshirase_ttl { font-size:130%; font-weight:bold; padding-bottom:0.3em; border-bottom-style:dotted; border-bottom-width:1px; margin-bottom:0.5em; }
.oshirase_ttl_sub { font-size:120%; font-weight:bold; padding-bottom:0.2em; margin-bottom:0.5em; margin-top:1em; }
.oshirase_danraku { font-size:100%; line-height:1.5em; margin-bottom:0.6em; word-wrap:normal; }
.oshirase_shime { text-align:right; width:90%; margin:0 auto; }
.oshirase_shime div { display:inline-block; text-align:left; }

.oshirase.color_red{ border-color:#BD0003; }
.color_red .oshirase_ttl { color:#d00; border-bottom-color:#BD0003; }

.oshirase.color_blue{ border-color:#2958B8; }
.color_blue .oshirase_ttl { color:#143882; border-bottom-color:#2958B8; }

.oshirase.color_green{ border-color:#3E872C; }
.color_green .oshirase_ttl { color:#2A631C; border-bottom-color:#3E872C; }

.oshirase.color_grd.grd_red {
  background: -moz-linear-gradient(top left, #D76D7A, #BD273A);
  background: -webkit-linear-gradient(top left, #D76D7A, #BD273A);
  background: linear-gradient(to bottom right, #D76D7A, #BD273A);
	border-style:none;
}
.oshirase.color_grd.grd_red .oshirase_ttl  { color:#fff; }

.oshirase.color_grd.grd_greenblue {
  background: -moz-linear-gradient(top left, #38A671, #4882DC);
  background: -webkit-linear-gradient(top left, #38A671, #4882DC);
  background: linear-gradient(to bottom right, #38A671, #4882DC);
	border-style:none;
}
.oshirase.color_grd.grd_greenblue .oshirase_ttl  { color:#fff; }

.oshirase.color_grd.grd_orange {
  background: -moz-linear-gradient(top left, #FFCD00, #FF6E00);
  background: -webkit-linear-gradient(top left, #FFCD00, #FF6E00);
  background: linear-gradient(to bottom right, #FFCD00, #FF6E00);
	border-style:none;
}
.oshirase.color_grd.grd_orange .oshirase_ttl  { color:#fff; }

/* ===========================
flexbox
============================*/
.fb_div, .fb_div *, .fb_div *:before, .fb_div *:after,
.fb_div_center, .fb_div_center *, .fb_div_center *:fb_div_center, .fb_div_center *:after,
.fb_div_left, .fb_div_left *, .fb_div_left *:before, .fb_div_left *:after,
.fb_div_tate, .fb_div_tate *, .fb_div_tate *:before, .fb_div_tate *:after,
.fb_div_rev, .fb_div_rev *, .fb_div_rev *:before, .fb_div_rev *:after
 {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	word-wrap: break-word;
}

.flx_item * img, .fb_div * img, .fb_div_center * img, .fb_div_left * img {
	width:100%;
	margin-bottom:8px;
}

.col_1p12, .col_2p12, .col_2p10, .col_3p12, .col_4p12, .col_5p12, .col_6p12, .col_7p12, .col_8p12, .col_9p12, .col_10p12, .col_11p12, .col_12p12,
.photo_1, .photo_2, .photo_3, .photo_4, .photo_5, .photo_6, .photo_7, .photo_8, .photo_9, .photo_10
{ margin:0; padding:0; }

.photo_1 img, .photo_2 img, .photo_3 img, .photo_4 img, .photo_5 img, .photo_6 img, .photo_7 img, .photo_8 img, .photo_9 img, .photo_10 img 
{ box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.2); }

@media only screen and (min-width:900px){

	/*　均等並び　*/
	.fb_div {
		width:100%;
		margin:0;
		padding:0;
		text-align:center;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: start;
			-webkit-align-items: flex-start;
			-ms-flex-align: start;
			align-items: flex-start;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-align: stretch;
			-ms-flex-align: stretch;
					align-items: stretch;
		flex-wrap: wrap;
	}

	/*　中央寄せ　*/
	.fb_div_center {
		width:100%;
		margin:0;
		padding:0;
		text-align:center;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: start;
			-webkit-align-items: flex-start;
			-ms-flex-align: start;
			align-items: flex-start;
		-webkit-box-pack: center;
			-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: stretch;
			-ms-flex-align: stretch;
					align-items: stretch;
		flex-wrap: wrap;
	}

	/*　左寄せ（普通？）　*/
	.fb_div_left {
		width:100%;
		margin:0;
		padding:0;
		text-align:left;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: start;
			-ms-flex-pack: start;
		justify-content: flex-start;
		-webkit-box-align: stretch;
			-ms-flex-align: stretch;
					align-items: stretch;
	}

	/*　縦割り　*/
	.fb_div_tate {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		word-wrap: break-word;
		margin:0;
		padding:0;
		width:100%;
		margin:0.7em auto 0.5em;
		text-align:center;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: start;
			-webkit-align-items: flex-start;
			-ms-flex-align: start;
			align-items: flex-start;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-align: stretch;
			-ms-flex-align: stretch;
					align-items: stretch;
		flex-wrap: wrap;
		line-height:1.5em;
	}

	/*　逆並べ　左から　*/
	.fb_div_rev{
		margin:0;
		padding:2em 2em 2em 0;
		text-align:center;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: start;
		-webkit-align-items: flex-start;
		-ms-flex-align: start;
		align-items: flex-start;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-align: stretch;
		-ms-flex-align: stretch;
		align-items: stretch;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: reverse;
		-ms-flex-direction: row-reverse;
		flex-direction: row-reverse;				
		flex-wrap: nowrap;
		font-size: 200%;
	}

	.flx_item {
		margin:0 0.2em;
		-webkit-box-flex:1;
		-webkit-flex:1;
		-ms-flex:1;
		flex:1;
	}

	.col_12p12 { width:100%; }	/* 12分の12 */
	.col_11p12 { width:91.0%; }	/* 12分の11 */
	.col_10p12 { width:82.8%; }		/* 12分の10 */
	.col_9p12 { width:74.4%; }	/* 12分の9 */
	.col_8p12 { width:66%; }	/* 12分の8 */
	.col_7p12 { width:57.9%; }	/* 12分の7 */
	.col_6p12 { width:49.5%; }	/* 12分の6 半分 */
	.col_5p12 { width:41.3%; }	/* 12分の5 */
	.col_4p12 { width:32.9%; }	/* 12分の4 3分割 */
	.col_3p12 { width:24.6%; }	/* 12分の3 4分割 */
	.col_2p10 { width:19.7%; }	/* 10分の2 5分割 */
	.col_2p12 { width:16.4%; }	/* 12分の2 6分割 */
	.col_1p12 { width:8.2%; }		/* 12分の1 12分割 */

	.photo_1 { width:100%; }	/* 1枚 */
	.photo_2 { width:49.7%; }	/* 2枚 */
	.photo_3 { width:33.2%; }	/* 3枚 */
	.photo_4 { width:24.8%; }	/* 4枚 */
	.photo_5 { width:19.8%; }	/* 5枚 */
	.photo_6 { width:15.8%; }	/* 6枚 */
	.photo_7 { width:13.8%; }	/* 7枚 */
	.photo_8 { width:12.3%; }	/* 8枚 */
	.photo_9 { width:11%; }		/* 9枚 */
	.photo_10 { width:9.7%; }	/* 10枚 */

	.photo_4 { width:49.8%; }
	.photo_5, .photo_6 { width:33.2%; }
	.photo_7, .photo_8 { width:24.6%; }
	.photo_9, .photo_10 { width:16.4%; }

}

@media only screen and (max-width:899px){
	.fb_div, .fb_div_center, .fb_div_left, .fb_div_tate, .fb_div_rev { flex:none; display:block; width:100%; }
	.flx_item { flex:none; display:block; width:100%;}
	.col_1p12, .col_2p12, .col_2p10, .col_3p12, .col_4p12, .col_5p12, .col_6p12, .col_7p12, .col_8p12, .col_9p12, .col_10p12, .col_11p12, .col_12p12 { width:100%; }

	.photo_2, .photo_3, .photo_4 { width:100%; }
	.photo_5, .photo_6, .photo_7 { width:49.8%; }
	.photo_8, .photo_9, .photo_10 { width:33.2%; }
	
}



