@charset "utf-8";
/* -----------------------------------------------------------
グリッド
----------------------------------------------------------- */
.grid2>*,.grid3>*,.grid4>*,.grid5>*,.grid6>*{ float:left; margin:0 0 1em; position:relative; box-sizing:border-box;}
.grid2>* img,.grid3>* img,.grid4>* img,.grid5>* img,.grid6>* img{ margin-bottom:1em;}

.grid2>*{width:48%; margin-right:4%; font-size:95%;}
/*タブレット以上*/@media(min-width:741px){/*余裕のあるマージン*/.grid2.margin>*{width:46%; margin-right:8%; margin-bottom:2em;}}
.grid2>*:nth-child(2n){margin-right:0;}
.grid2>*:nth-child(2n+1){ clear:both;}

.grid3>*{width:31.3%; margin-right:3%; font-size:90%;}
/*タブレット以上*/@media(min-width:741px){/*余裕のあるマージン*/.grid3.margin>*{width:29.3%; margin-right:6%; margin-bottom:2em;}}
.grid3>*:nth-child(3n){margin-right:0;}
.grid3>*:nth-child(3n+1){ clear:both;}

.grid4>*{width:23.5%; margin-right:2%; font-size:85%;}
/*タブレット以上*/@media(min-width:741px){/*余裕のあるマージン*/.grid4.margin>*{width:22%; margin-right:4%; margin-bottom:2em;}}
.grid4>*:nth-child(4n){margin-right:0;}
.grid4>*:nth-child(4n+1){ clear:both;}

.grid5>*{width:18.4%; margin-right:2%; font-size:80%;}
.grid5>*:nth-child(5n){margin-right:0;}
.grid5>*:nth-child(5n+1){ clear:both;}

.grid6>*{width:15%; margin-right:2%; font-size:75%;}
.grid6>*:nth-child(6n){margin-right:0;}
.grid6>*:nth-child(6n+1){ clear:both;}

/*タブレット*/
@media(max-width:1024px){
/*+.verticalでタブレットでも縦に*/
.grid2.vertical>*,.grid3.vertical>*,.grid4.vertical>*,.grid5.vertical>*,.grid6.vertical>*{width:auto; float:none; margin:0 0 2em;}
}

/*スマホ*/
@media(max-width:740px){
.grid2>*,.grid3>*,.grid4>*,.grid5>*,.grid6>*{width:auto; float:none; margin:0 0 2em; font-size:14px;}

/*+.holdでSPでも固定*/
.grid2.hold>*{ width:48%; float:left; margin:0 4% 1em 0; font-size:95%;}.grid2.hold>*:nth-child(2n){ margin-right:0;}.grid2.hold>*:nth-child(2n+1){ clear:both;}
.grid3.hold>*{ width:31.3%; float:left; margin:0 3% 1em 0; font-size:90%;}.grid3.hold>*:nth-child(3n){ margin-right:0;}.grid3.hold>*:nth-child(3n+1){ clear:both;}
.grid4.hold>*{ width:23.5%; float:left; margin:0 2% 1em 0; font-size:85%;}.grid4.hold>*:nth-child(4n){ margin-right:0;}.grid4.hold>*:nth-child(4n+1){ clear:both;}
.grid5.hold>*{ width:18.4%; float:left; margin:0 2% 1em 0; font-size:80%;}.grid5.hold>*:nth-child(5n){ margin-right:0;}.grid5.hold>*:nth-child(5n+1){ clear:both;}
.grid6.hold>*{ width:15%; float:left; margin:0 2% 1em 0; font-size:75%;}.grid6.hold>*:nth-child(6n){ margin-right:0;}.grid6.hold>*:nth-child(6n+1){ clear:both;}
}

/* -----------------------------------------------------------
グリッドと.navの複合
----------------------------------------------------------- */
.grid2.nav>*,.grid3.nav>*,.grid4.nav>*,.grid5.nav>*,.grid6.nav>*{ margin-bottom:0;}

/* -----------------------------------------------------------
.grid3 から 2へ
----------------------------------------------------------- */
.grid3.to2.nav>* h4{ font-size:14px;}
.grid3.to2.nav>* p{ font-size:10px;}
/*スマホ*/
@media(max-width:740px){
/*2カラムへ*/
.grid3.to2>*{width:48%; margin-right:4%;}
.grid3.to2>*:nth-child(2n){margin-right:0;}
.grid3.to2>*:nth-child(2n+1){ clear:both; margin-right:4%;}
.grid3.to2>*:nth-child(3n+1){ clear:none;}
}
/* -----------------------------------------------------------
.grid4 から 2へ
----------------------------------------------------------- */
.grid4.to2.nav>* h4{ font-size:14px;}
.grid4.to2.nav>* p{ font-size:10px;}
/*スマホ*/
@media(max-width:740px){
/*2カラムへ*/
.grid4.to2>*{width:48%; margin-right:4%;}
.grid4.to2>*:nth-child(2n){margin-right:0;}
.grid4.to2>*:nth-child(2n+1){ clear:both; margin-right:4%;}
.grid4.to2>*:nth-child(4n+1){ clear:none;}
}