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


/* --------------------------------

	* Layout Style + Template Style {


		* last update　2013.02
	
	}
	
--------------------------------

	* Contents
	
	1. Structure Frame
	2. Template Style
	
--------------------------------

 /*  div は全て clearfix
-----------------------------------*/
div:after {
    content			: ".";
    display			: block;
    visibility		: hidden;
    clear			: both;
    height			: 0.1px;
    font-size		: 0.1em;
    line-height		: 0;
}


/* ==========================================================================================================

	 1. Structure Frame
 
============================================================================================================*/
body {
	overflow-x		: hidden;
	text-align		: center; /* for ie5_centering */
	height			: 100%;
	line-height		: 1.7;
	background		: #f3f4ee;
}
.body--fixed {
	position: fixed;
	width: 100%;
	height: 100%;
}

div#wrapper {
	width			: 100%;
	background		: #ffffff;
}

/*  ------------------------------------------------------------------

	header

---------------------------------------------------------------------*/

/*  ------------------------------------------------------------------

	header

---------------------------------------------------------------------*/

.header {
	background-color: #fff;
	border-bottom: 5px solid #d3bb09;
	position: relative;
	z-index: 99999;
}
.header_inner {
	padding: 20px 15px 30px;
}
.header_inner::after {
	display: none;
}
.header_logo {
	margin-right: 20px;
}
.header_logo img {
	width: 264px !important;
}
.header_search {
	width: 380px;
}
.header_search_area {
	width: 300px;
	margin-right: 10px;
}
.header_search .gsc-control-cse {
	padding: 0;
}
.header_search .gsc-search-box-tools .gsc-search-box .gsc-input {
	padding-right: 5px;
	min-height: 20px;
}
.header_search .gsc-search-button-v2 {
    padding: 6px 0;
    border: none;
    background-color: transparent !important;
    background-image: none !important;
}
.header_search .gsc-search-button-v2:hover {
	opacity: .5;
	cursor: pointer;
}
.header_search .gsc-search-button-v2 svg {
	fill: #000;
}
.header_search .input.gsc-input,
.header_search .gsc-input-box,
.header_search .gsc-input-box-hover,
.header_search .gsc-input-box-focus {
	border-color: #000;
	border-radius: 10px;
}
.header_keyword {
	align-items: center;
	font-size: 11px;
}
.header_keyword_ttl {
	text-align: left;
	line-height: 1.2;
	margin-right: 8px;
	margin-bottom: 3px;
}
@media screen and ( min-width: 1079px) {
	.header_search {
		width: auto;
	}
	.header_keyword {
		display: block !important;
	}
	.header_search_inner {
		display: flex;
	}
	.header_keyword_ttl {
		margin-bottom: 5px;
		margin-right: 0;
	}
	.header_keyword_ttl br {
		display: none;
	}
}
@media screen and (max-width: 1080px) {
	.header_keyword_ttl {
		margin-bottom: 5px;
	}
	.header_keyword_ttl br {
		display: none;
	}
}
.header_keyword li {
	margin-right: 5px;
	margin-bottom: 5px;
}
.header_keyword li a {
	display: block;
	padding: 3px;
	line-height: 1;
	background-color: #000;
	color: #fff;
	border-radius: 10px;
	text-decoration: none;
	font-size: 10px;
}
.header_keyword li a:hover {
	opacity: .7;
}
.header_keyword .gsib_a {
	padding-right: 12px;
    padding-left: 12px;
}


/*  ------------------------------------------------------------------

	container

---------------------------------------------------------------------*/
div#container {
	clear			: both;
	width			: 100%;
	height			: 100%;
	background		: #ffffff url(../img/common/container/container_bgi.gif) top repeat-x;
}
div#container_common {
	clear			: both;
	width			: 100%;
	height			: 100%;
	background		: #ffffff;
}
div#container_toppage {
	clear			: both;
	padding			: 104px 0 0 0;
	width			: 100%;
	height			: 100%;
	background		: #ffffff;
}
div#container_story {
	clear			: both;
	width			: 100%;
	height			: 100%;
	background		: #ffffff url(../img/common/container/container_story_bgi.jpg) top center no-repeat;
}

div#container_column_index {
	clear			: both;
	width			: 100%;
	height			: 100%;
	background		: #fff;
}

div#container_column {
	clear			: both;
	width			: 100%;
	height			: 100%;
	background		: #eeeeef;
}
div#container_promotion {
	clear			: both;
	width			: 100%;
	height			: 100%;
	background		: #eeeeef;
}

div#container_contact {
	clear			: both;
	width			: 100%;
	height			: 100%;
	background		: #ffffff;
	padding			: 0 0 0 0;
}

div#container_stuff {
	clear			: both;
	margin			: 0 auto 0 auto;
	max-width			: 900px;
	width   		: 90%;
	text-align		: left;
}

/*  ------------------------------------------------------------------

	container (primary)

---------------------------------------------------------------------*/
div#primary {
	float			: left;
	width			: -webkit-calc(100% - 250px);
	width			: calc(100% - 250px);
	height			: 100%;
}
@media (max-width: 768px) {
	div#primary {
		float			: none;
		width			: 100%;
	}
}

/*  ------------------------------------------------------------------

	container (secondary)

---------------------------------------------------------------------*/
div#secondary {
	z-index			: 0;
	position		: relative;
	_position		: static;
	float			: right;
	width			: 210px;
	height			: 100%;
}
@media (max-width: 768px) {
	div#secondary {
		float			: none;
		width			: 100%;
		position: static;
	}
}

/*  ------------------------------------------------------------------

	footer

---------------------------------------------------------------------*/
.footer {
	position: relative;
}
.footer .adminicle {
	padding: 10px 20px;
	background-color: #d3bb09;
}
.footer .adminicle li {
	margin-right: 20px;
	padding-right: 20px;
	border-right: 1px solid #000;
	line-height: 1;
}
.footer .adminicle li:last-child {
	margin-right: 0;
	padding-right: 0;
	border-right: none;
}
.footer .adminicle a {
	color: #000;
	font-weight: bold;
	text-decoration: none;
}
.footer .adminicle a:hover {
	text-decoration: underline;
}
.footer .address img {
	width: 120px !important;
	vertical-align: middle;
}
.footer_inner {
	position: relative;
	padding: 20px 20px 70px;
	background-color: #419360;
}
.footer_inner::after {
	content: "";
    position: absolute;
    width: 100%;
    height: 10px;
    bottom: -10px;
    left: 0;
    right: 0;
    margin: auto;
    visibility: visible;
    font-size: 10px;
    background: #41935f;
}
.footer .collective {
	text-align: left;
	color: #fff;
}
.footer .collective .view-sp {
	display: none;
}
.footer .collective a {
	color: #fff;
	text-decoration: none;
}
.footer .collective a:hover {
	text-decoration: underline;
}
.footer_logo_area {
}
.footer_logo {
	width: 271px !important;
}
@media (max-width: 900px) {
	.footer_logo_area {
		padding-top: 20px;
		display: block;
		margin: auto;
	}
	.footer .collective .view-sp {
		display: block;
	}
}


/* ==========================================================================================================

	 2. Template Style
 
============================================================================================================*/

/*  ------------------------------------------------------------------

	header

---------------------------------------------------------------------*/

/* menu
-----------------------------------*/
  .menu {
  	position: absolute;
  	right: 10px;
	top: 75px;
	 }
  .menu--on {
    right: 0; }
  .menu nav {
    padding: 0; }
  .menu nav li {
  	float: left;
    margin-bottom: 0px; }
  .menu nav a {
    color: #111;
    font-size: 11px;
    text-decoration: none;
  }
   .menu__trigger {
   	display: none;
   }
ul#menu li{
	float: left;
    position: relative;
    margin: 0;
    padding: 0 15px;
    display: block;
    z-index: 999;
	line-height: 1;
	min-height: 20px;
}
ul#menu > li{
	border-right: 1px solid #000;
}
ul#menu > li:last-child{
	padding-right: 0;
	border-right: none;
}
ul#menu > li:last-child ul.child {
	right: 0;
	left: auto;
}
ul.child{
    display: none;
    position: absolute;
    text-align: left;
	padding-top: 14px;
}

ul.child li {
	margin: 0;
	padding: 0 !important;
    background-color: rgba(0,0,0,.8);
    line-height: 1.5 !important;
    border-bottom: 1px dotted #999;
}
ul.child li:last-child {
	border-bottom: none;
}
ul.child li a{
    width: 250px;
    padding: 8px 10px;
    display: block;
    color: #fff;
}
ul.child li a:hover{
    background: #d3bb09;
}

@media screen and (max-width: 1080px) {
	.header_inner {
	    padding: 10px 15px 10px;
	}
	.menu {
		position: fixed;
		background-color: #419360;
		top: 0;
		bottom: 0;
		right: -300px;
		width: 300px;
		z-index: 2000;
		transition: all 0.2s ease;
		overflow-y: auto;
	}
	.menu--on {
		right: 0;
	}
	.menu nav {
		padding: 80px 30px 30px;
	}
	.menu nav li {
		margin-bottom: 20px;
	}
	.menu nav a {
		color: #fff;
		font-size: 14px;
	}

	.menu__trigger {
		position: relative;
		z-index: 3000;
		border: none;
		width: 60px;
		height: 60px;
		line-height: 1;
		vertical-align: middle;
		text-align: center;
		outline: none;
		display: block;
	}
	.menu__trigger:hover {
		cursor: pointer;
	}
	.menu__trigger span {
		display: inline-block;
		position: absolute;
		left: 0;
		right: 0;
		width: 20px;
		height: 2px;
		margin: auto;
		background: #000;
		line-height: 1;
		vertical-align: middle;
	}
	.menu__trigger span:nth-of-type(1) {
		top: 22px;
		transition: all 0.2s ease;
	}
	.menu__trigger span:nth-of-type(2) {
		top: 50%;
		margin-top: -1px;
		transition: all 0.2s ease;
	}
	.menu__trigger span:nth-of-type(3) {
		bottom: 22px;
		transition: all 0.2s ease;
	}
	.menu__trigger--on span {
		background: #fff;
	}
	.menu__trigger--on span:nth-of-type(1) {
		top: 50%;
		margin-top: -1px;
		transform: rotate(-45deg);
		transition: all 0.2s ease;
	}
	.menu__trigger--on span:nth-of-type(2) {
		display: none;
	}
	.menu__trigger--on span:nth-of-type(3) {
		bottom: 50%;
		margin-bottom: -1px;
		transform: rotate(45deg);
		transition: all 0.2s ease;
	}

	.overlay {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 1500;
		pointer-events: none;
		opacity: 0;
		transition: all 0.2s ease;
	}
	.overlay--on {
		opacity: 1;
	}

	ul#menu {
		margin-bottom: 50px;
	}
	ul#menu li {
		position: relative;
		float: none;
		text-align: left;
		border: none;
		line-height: 1.5;
		padding: 0;
		border-bottom: 1px solid rgba(255,255,255,.2);
	}
	ul#menu li a {
		display: block;
		padding: 10px 30px 10px 0;
	}
	ul#menu > li.has-menu::after {
		content: "";
		position: absolute;
		display: block;
		width: 7px;
		height: 7px;
		border-top: 1px solid #fff;
		border-right: 1px solid #fff;
		top: 14px;
		right: 10px;
		transform: rotate(135deg);
		margin: auto;
	}
	ul#menu > li.menu-active::after {
		top: 20px;
		transform: rotate(-45deg);
	}
	ul#vice_navi,
	dl#font_size {
		position: static !important;
	}
	ul.child{
		position: static;
	}
	ul.child li a {
		width: auto;
		padding: 10px !important;
	}

	ul#vice_navi li a {
	    color: #fff !important;
	}
	ul#vice_navi li .target {
	    color: #d3bb09 !important;
	}
	dl#font_size dt {
		color: #fff;
	}
	dl#font_size dd li#font_size_s a.textresizer-active,
	dl#font_size dd li#font_size_m a.textresizer-active,
	dl#font_size dd li#font_size_l a.textresizer-active {
	    background-color: #d3bb09 !important;
	}
}
@media screen and (max-width: 768px) {
	.header_search {
		width: 100%;
		background-color: #fff;
	    padding: 10px 15px 10px;
	    box-sizing: border-box;
	}
	.header_logo_area {
		flex: 1;
    	align-items: center;
	}
	.header_logo {
		width: 60%;
		text-align: left;
	}
	.header_logo img {
		max-width: 100%;
		height: auto;
	}
}

/*  site_logo
-----------------------------------*/

/*  category
-----------------------------------*/
ul#category {
	position		: absolute;
	margin			: 0 0 0 0;
	padding			: 0 0 0 1px;
	width			: 899px;
	_width			: 900px;
	height			: 40px;
	background		: url(../img/common/header/category_bgi.gif) left no-repeat;
	left			: 2px;
	top				: 80px;
}
ul#category li {
	position		: relative;
	float			: left;
	margin			: 0 1px 0 0;
	height			: 40px;
}
ul#category li ul {
	z-index			: 100 !important;
	position		: absolute;
	display			: none;
	top				: 40px;
	left			: 0;
	padding			: 5px 0 10px 0;
	width			: 257px;
	line-height		: 1.6;
	border-top		: none;
	background		: #2d2d2d;
}
ul#category li ul li {
	height			: auto;
}
ul#category li ul li a {
	display			: block;
	float			: left;
	margin			: 0 5px 0 5px;
	padding			: 8px 0 9px 5px;
	_padding		: 8px 0 9px 0;
	width			: 244px;
	height			: auto;
	text-decoration	: none;
	color			: #ffffff;
	background		: #2d2d2d url(../img/common/common/dotline_bgi.png) bottom left repeat-x;
}
ul#category li ul li a:hover {
	color			: #969696;
}
ul#category li ul li a span {
	display			: block;
}
ul#category li:hover ul ul,
ul#category li:hover ul ul ul,
ul#category li:hover ul ul ul ul{
	display			: none;
}
ul#category li:hover ul,
ul#category li li:hover ul,
ul#category li li li:hover ul,
ul#category li li li li:hover ul{
	display			: block;
}


/*  keyvisual
-----------------------------------*/
div#keyvisual {
	position		: absolute;
	top				: 150px;
	left			: 0;
	width			: 900px;
}

/*  font_size
-----------------------------------*/
dl#font_size {
	position		: absolute;
	top				: 30px;
	right: 10px;
	width			: 140px;
	height			: 20px;
	line-height		: 100%;
	display: table;
}
dl#font_size dt {
	float			: left;
	/*width			: 57px;*/
	padding-top: 5px;
	
}
dl#font_size dd {
	float			: right;
	/*width			: 72px;*/
}
dl#font_size dd ul {}
dl#font_size dd li {
	float			: left;
	margin			: 0 5px 0 0;
	cursor: pointer;
}
dl#font_size dd li#font_size_s a,
dl#font_size dd li#font_size_m a,
dl#font_size dd li#font_size_l a {
	display			: block;
	width			: 20px;
	height			: 20px;
	font-size		: 11px;
	border-radius: 50%;
	color: #fff;
	background-color: #419360;
	text-decoration: none;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
}
dl#font_size dd li#font_size_s a,
dl#font_size dd li#font_size_m a,
dl#font_size dd li#font_size_l a { 
	display			: block;
	width			: 20px;
	height			: 20px;
	font-size		: 11px;
	border-radius: 50%;
	color: #111;
	background-color: #c9caca;
	text-decoration: none;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
}
dl#font_size dd li#font_size_s a.textresizer-active, 
dl#font_size dd li#font_size_m a.textresizer-active, 
dl#font_size dd li#font_size_l a.textresizer-active { 
	display			: block;
	width			: 20px;
	height			: 20px;
	font-size		: 11px;
	border-radius: 50%;
	color: #fff;
	background-color: #419360;
	text-decoration: none;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
}


/*dl#font_size dd li#font_size_s a,
dl#font_size dd li#font_size_m a,
dl#font_size dd li#font_size_l a {
	display			: block;
	width			: 19px;
	height			: 19px;
	font-size		: 0;
	background		: url(../img/common/header/font_size_s_btn.gif) no-repeat;
}
dl#font_size dd li#font_size_s a { background: url(../img/common/header/font_size_s_btn_off.gif) no-repeat;}
dl#font_size dd li#font_size_m a { background: url(../img/common/header/font_size_m_btn_off.gif) no-repeat;}
dl#font_size dd li#font_size_l a { background: url(../img/common/header/font_size_l_btn_off.gif) no-repeat;}
dl#font_size dd li#font_size_s a.textresizer-active { background: url(../img/common/header/font_size_s_btn_act.gif) no-repeat;}
dl#font_size dd li#font_size_m a.textresizer-active { background: url(../img/common/header/font_size_m_btn_act.gif) no-repeat;}
dl#font_size dd li#font_size_l a.textresizer-active { background: url(../img/common/header/font_size_l_btn_act.gif) no-repeat;}
*/


/*  vice_navi
-----------------------------------*/
ul#vice_navi {
	position		: absolute;
	top				: 25px;
	right			: 15px;
}
ul#vice_navi li {
	float: left;
}
ul#vice_navi li a {
	text-decoration: none;
	color: #000;
}
ul#vice_navi li .target {
	font-weight: bold;
	color: #1e8238;
}

.jp {
	margin-right: 1em;
}


/*  ------------------------------------------------------------------

	primary

---------------------------------------------------------------------*/


/*  ------------------------------------------------------------------

	secondary

---------------------------------------------------------------------*/

/*  stratum
-----------------------------------*/
dl#stratum {
	margin			: 0 0 40px 0;
	width			: 210px;
}
dl#stratum dt {
	padding			: 10px 15px 10px 15px;
	width			: 180px;
	color			: #ffffff;
	text-decoration	: none;
	background		: #419332 url(../img/common/secondary/stratum_ttl_bgi.gif) top left no-repeat;
}
dl#stratum dt#link {
	padding			: 0 0 0 0;
	width			: 210px;
}
dl#stratum dt#link a {
	display			: block;
	padding			: 10px 15px 10px 32px;
	color			: #ffffff;
	text-decoration	: none;
	background		: url(../img/common/secondary/stratum_nav_bgi.gif) 16px 50% no-repeat;
}
dl#stratum dt#link a:hover {
	color			: #c3da9e;
}
dl#stratum dd {
	padding			: 4px 4px 0 4px;
	width			: 200px;
	border			: #dcddd6 solid 1px;
	border-top		: none;
	background		: #f3f4ee;
}
dl#stratum dd ul {}
dl#stratum dd li.rent {
	margin			: 0 0 4px 0;
	padding			: 0 0 3px 0;
	cursor			: pointer;
	background		: url(../img/common/secondary/stratum_bot_off_bgi.gif) bottom no-repeat;
}
dl#stratum dd li.rent:hover {
	background		: url(../img/common/secondary/stratum_bot_act_bgi.gif) bottom no-repeat;
}
dl#stratum dd li.rent a {
	padding			: 8px 0 0 0;
	display			: block;
	text-decoration	: none;
	background		: #ffffff url(../img/common/secondary/stratum_top_off_bgi.gif) top no-repeat;
}
dl#stratum dd li.rent a:hover {
	color			: #1e8238;
	background		: #f3f8e2 url(../img/common/secondary/stratum_top_act_bgi.gif) top no-repeat;
}
dl#stratum dd li.rent a span {
	display			: block;
	padding			: 0 0 5px 26px;
	border-left		: #dcddd6 solid 1px;
	border-right	: #dcddd6 solid 1px;
}
dl#stratum dd li.active {
	background		: url(../img/common/secondary/stratum_bot_act_bgi.gif) bottom no-repeat;
}
dl#stratum dd li.active a {
	background		: #f3f8e2 url(../img/common/secondary/stratum_top_act_bgi.gif) top no-repeat;
}
dl#stratum dd li.lamb {
	margin			: 0 0 2px 11px;
}
dl#stratum dd li.lamb a {
	display			: block;
	padding			: 0 0 0 16px;
	text-decoration	: none;
	background		: url(../img/common/secondary/stratum_lamb_off_bgi.gif) top left no-repeat;
}
dl#stratum dd li.lamb a:hover {
	background		: url(../img/common/secondary/stratum_lamb_act_bgi.gif) top left no-repeat;
}
dl#stratum dd li.target a {
	color			: #92c341;
	background		: url(../img/common/secondary/stratum_lamb_act_bgi.gif) top left no-repeat;
}
dl#stratum dd li#region_top {
	margin			: 0 0 10px 11px;
}
dl#stratum dd li#region_bot {
	margin			: 0 0 10px 11px;
}
@media (max-width: 768px) {
	dl#stratum {
		margin			: 0 0 20px 0;
		width			: 100%;
	}
	dl#stratum dt {
		width			: 100%;
		background-color: #3B943D;
		box-sizing  	: border-box;
	}
	dl#stratum dd {
		width			: 100%;
		box-sizing  	: border-box;
	}
	dl#stratum dd li.rent {
		border-radius	: 5px;
		border			: 1px solid #ccc;
	}
	dl#stratum dd li.rent a {
		background		: transparent !important;
	}
	dl#stratum dd li.rent a span {
		border  		: none;
		background		: url(../img/common/secondary/stratum_lamb_off_bgi.gif) top left no-repeat;
		background-position: 10px 0;
	}
	dl#stratum dd li.rent {
		background		: #fff !important;
	}
	dl#stratum dd li.active {
		background		: #f3f8e2 !important;
	}
}

/*  announce
-----------------------------------*/
ul#announce {
	margin			: 0 0 35px 0;
	width			: 210px;
}
ul#announce li {
	margin			: 0 0 5px 0;
}


/*  ------------------------------------------------------------------

	footer

---------------------------------------------------------------------*/

/*  page_top
-----------------------------------*/
div#page_top {
	clear			: both;
	margin			: 0 auto 10px auto;
	max-width			: 900px;
}
div#page_top p {
	float			: right;
}
div#page_top p a {
	padding			: 0 0 0 17px;
	background		: url(../img/common/footer/page_top_bgi.gif) center left no-repeat;
}

/*  adminicle
-----------------------------------*/
ul#adminicle {
	margin			: 0 0 20px 0;
	height			: 35px;
	line-height		: 35px;
}
ul#adminicle li {
	display: inline;
}
ul#adminicle li span {
	padding: 0 5px 0 5px;
}
ul#adminicle li a {
	color			: #ffffff;
	text-decoration	: none;
}
ul#adminicle li a:hover {
	color			: #55504b;
}

/*  collective
-----------------------------------*/
dl#collective {}
dl#collective dt {
	margin			: 0 0 10px 0;
	font-weight		: bold;
}
dl#collective dd {}

/*  literary
-----------------------------------*/
p#literary {
	text-align: right;
}


/******** 2018年リニューアル 追加分（スマホ対応）  ********/

/*
	スマホ閲覧時のtableの横スクロール
	<table>を<div class="table_wrap">で囲う
*/
.table_wrap {
	overflow-x: auto;
	overflow-y: hidden;
}
.table_wrap table {
	box-sizing: border-box;
}
@media only screen and (max-device-width: 1024px){
	.table_wrap::-webkit-scrollbar {
		height: 5px;
	}
	.table_wrap::-webkit-scrollbar-track {
		border-radius: 5px;
		background: #eee;
	}
	.table_wrap::-webkit-scrollbar-thumb {
		border-radius: 5px;
		background: #666;
	}
}

/*スマホ閲覧時の表示・非表示*/
.view--sp {
    display: none !important;
}
.view--pc {
    display: block !important;
}
@media (max-width: 768px) {
	.view--sp {
    	display: block !important;
    }
    .view--pc {
    	display: none !important;
    }
}
/*スクロールバー注意書きの表示・非表示*/
.view--caution {
    display: none !important;
}
@media (min-width: 769px) and (max-width: 1014px) {
	.view--caution {
		display: block !important;
    }
}
@media (max-width: 736px) {
	.view--caution {
		display: block !important;
    }
}


/* 均等揃え */
.flex-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.flex-row .flex-col-25-md {
width: 100%;
}
.flex-row .flex-col-50-sm {
width: 100%;
}
.flex-row .flex-col-100 {
    width: 100%;
}
.flex-row .flex-col-50 {
    width: 50%;
}
.flex-row .flex-col-30 {
    width: 25%;
}
.flex-row .flex-col-25 {
    width: 25%;
}
.flex-row .flex-col-20 {
    width: 20%;
}

@media (min-width:600px) {
    .flex-row .flex-col-25-md {
        width: 50%;
    }
    .flex-row .flex-col-50-md {
        width: 100%;
    }
}

@media (min-width:960px) {
    .flex-row {
        display: flex;
    }
    .flex-row .flex-col-50-sm,
    .flex-row .flex-col-50-md {
        width: 50%;
    }
    .flex-row .flex-col-25-sm,
    .flex-row .flex-col-25-md {
        width: 25%;
    }
}

/* 中央ぞろえ */
.flex-center {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.flex-center .flex-col-25-md {
    width: 100%;
}
.flex-center .flex-col-33 {
    width: 100%;
}
.flex-center .flex-col-50-sm {
    width: 100%;
}
.flex-center .flex-col-100 {
    width: 100%;
}
.flex-center .flex-col-50 {
    width: 50%;
}
.flex-center .flex-col-25 {
    width: 25%;
}
.flex-center .flex-col-20 {
    width: 20%;
}

@media (min-width:600px) {
    .flex-center .flex-col-25-md {
        width: 49%;
    }
    .flex-center .flex-col-33 {
        width: 49%;
    }
    .flex-center .flex-col-50-md {
        width: 100%;
    }
}

@media (min-width:960px) {
    .flex-center {
        display: flex;
    }
    .flex-center .flex-col-50-sm,
    .flex-center .flex-col-50-md {
        width: 49%;
    }
    .flex-center .flex-col-25-sm,
    .flex-center .flex-col-25-md {
        width: 23%;
    }
    .flex-center .flex-col-33 {
        width: 33%;
    }
}

/* 通常の並べ方 */
.flex {
    display: flex;
    flex-wrap: wrap;
}
.flex .flex-col-25-md {
    width: 100%;
}
.flex .flex-col-33 {
    width: 100%;
}
.flex .flex-col-50-sm {
    width: 100%;
}
.flex .flex-col-100 {
    width: 100%;
}
.flex .flex-col-50 {
    width: 50%;
}
.flex .flex-col-25 {
    width: 25%;
}
.flex .flex-col-20 {
    width: 20%;
}

@media (min-width:600px) {
    .flex .flex-col-25-md {
        width: 49%;
    }
    .flex .flex-col-33 {
        width: 49%;
    }
    .flex .flex-col-50-md {
        width: 100%;
    }
}

@media (min-width:960px) {
    .flex {
        display: flex;
    }
    .flex .flex-col-50-sm,
    .flex .flex-col-50-md {
        width: 49%;
    }
    .flex .flex-col-25-sm,
    .flex .flex-col-25-md {
        width: 23%;
    }
    .flex .flex-col-33 {
        width: 33%;
    }
}