@charset "utf-8";

/* ========================================================
   for ＰＣ　1200px～
===========================================================*/

.component-column {
    padding: 20px 10px 10px;
}

.component-column:after {
    content: "";
    clear: both;
    display: block;
}

.component-column [class*=col-] {
    float: left;
    padding: 0 10px 10px;
}

.component-column .col-1-1 {/*全体の全部：100%*/
    width: 100%;
}
.component-column .col-2-1 {/*全体の半分：50%*/
    width: 50%;
}
.component-column .col-2-2 {/*全体の全部：100%*/
    width: 100%;
}
.component-column .col-3-1 {/*全体の1/3：33%*/
    width: 33.33333%;
}

/*add*/

.column-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.column-2 .column-box {/*全体の半分：50%・左右15px小さく*/
    width: calc(50% - 15px);
}
.column-3 .column-box {/*全体の1/3：33%・左右15px小さく*/
    width: calc(33.333% - 15px);
}
.column-4 .column-box {/*全体の1/4：25%・左右15px小さく*/
    width: calc(25% - 15px);
}


.inner_top_img .column-2 .column-box {/*トップページ：上部の写真部分：全体の半分：50%・左右5px余白*/
    width: calc(50% - 5px);
}


.column-wrap.column-left {
    margin: 0 -15px;
    justify-content: left;
}
.column-left.column-4 .column-box {
    width: 25%;
    padding: 0 15px;
}
.column-left.column-3 .column-box {
    width: 33.333%;
    padding: 0 15px;
}

.column-main {
    width: calc(100% - 350px);
}


/* ========================================================
   for タブレット　600px～1199px
===========================================================*/

@media screen and (min-width:600px) and (max-width:1199px) {
.column-wrap.tb-column-2 .column-box {
	width: calc(50% - 15px);
}

.column-left.tb-column-2 .column-box {
	width: 50%;
}
}


/* ========================================================
   for スマホ　～599px
===========================================================*/

@media screen and (max-width: 599px) {
.component-column {
	padding: 15px 10px 5px;
    display: flex;
    flex-wrap: wrap;
}

.component-column [class*=col-] {
    float: none;
    padding: 0 5px 10px;
    min-width: 0;
}

.component-column .col-1-1 {/*全体の1/1：100%*/
	flex: 0 0 100%;
}
.component-column .col-2-1 {/*全体の1/2：50%*/
	flex: 0 0 100%;
    flex-basis: auto;
}
.component-column .col-2-2 {/*全体の2/2：100%*/
	flex: 0 0 100%;
}
.component-column .col-3-1 {/*全体の1/3：33%*/
	flex: 0 0 33.33333%;
}
.component-column .col-3-2 {/*全体の2/3：66%*/
	flex: 0 0 66.66667%;
}
.component-column .col-3-3 {/*全体の3/3：100%*/
	flex: 0 0 100%;
}

/*add*/
.column-wrap.sp-column-1 {
	flex-wrap: wrap;
}
.column-wrap.sp-column-1 .column-box {
	width: 100%;
}
	
.column-wrap.sp-column-2 .column-box {
	width: calc(50% - 15px);
}
.column-left.sp-column-2 .column-box {
	width: 50%;
}	
	
.column-main {
	width: 100%;
    order: 1;
}

.sp-reverse {/*スマホの場合、逆順で表示*/
	flex-wrap: wrap-reverse !important;
}
}