@charset "utf-8";



/* --------------------------------------------------- */
/* 内容  */
/* --------------------------------------------------- */

/*--提案色　見出し部分------------------------------------------------------------------------*/

.main {
    background: url(imgs/main01.png) no-repeat center center;
    background-size: 100% auto;
}


.maintxt{
max-width: 810px;
}


/*--通常---*/
.proposal{
max-width: 900px;
display: flex;
align-items: stretch;/*高さそろえ*/
justify-content: space-between;
}

.proposal > div:nth-of-type(1){
width: 68%;
}
.proposal > div:nth-of-type(1) img{
vertical-align: bottom;
}
.proposal > div:nth-of-type(2){
flex-direction:column;
display:flex;
flex-flow: column;
/*justify-content: space-between;*/
width: 26%;
}

.proposal > div:nth-of-type(2) p{
text-align: center;
margin-bottom: 2em;
}
.proposal > div:nth-of-type(2) p:last-of-type{
margin-bottom: 0;
}

/*--幅広---*/

.proposal.columns3{
max-width: 1180px;
}
.proposal.columns3 > div:nth-of-type(1){
width: 53%;
}
.proposal.columns3 > div:nth-of-type(2) {
width: 43%;
display: flex;
flex-flow: row wrap;
align-items: flex-start;
justify-content: space-between;
}

.proposal.columns3 > div:nth-of-type(2) p{
width: 48%;
}

.proposal > div:nth-of-type(2) p:last-of-type{
margin-bottom: 0;
}

@media screen and (max-width: 800px) {
.proposal.columns3,
.proposal{
display: block;
}
.proposal.columns3 > div:nth-of-type(1),
.proposal.columns3 > div:nth-of-type(2),
.proposal > div:nth-of-type(2),
.proposal > div:nth-of-type(1){
width: 100%;
}
.proposal.columns3 > div:nth-of-type(2),
.proposal > div:nth-of-type(2){
margin-top: 1.2em;
flex-wrap: wrap;
flex-direction:row;
align-items: stretch;
}

.proposal > div:nth-of-type(2) p{
width: 49%;
}
.proposal.columns3 > div:nth-of-type(2) p:nth-of-type(2n),
.proposal > div:nth-of-type(2) p:nth-of-type(2n){
margin-left: 2%;
}
.proposal > div:nth-of-type(2) p:last-of-type{
margin-bottom: 1.2em;
}
}/*max-width: 800px*/


@media screen and (max-width: 420px) {
.proposal.columns3 > div:nth-of-type(2),
.proposal > div:nth-of-type(2){
display: block;
}
.proposal.columns3 > div:nth-of-type(2) p:nth-of-type(2n),
.proposal > div:nth-of-type(2) p:nth-of-type(2n){
margin-left: 0;
}

.proposal.columns3 > div:nth-of-type(2) p,
.proposal > div:nth-of-type(2) p{
width: 100%;
}
}/*max-width: 420px*/

/*大きい画像をスマホで切り抜き
文字等が入っている場所で名前を付けています
*/
@media screen and (max-width: 800px) {
.clip-center{
clip-path: inset(100px 0 100px 0);
margin: -100px 0;
}
.clip-center2{
clip-path: inset(200px 0 200px 0);
margin: -200px 0;
}
.clip-top{
clip-path: inset(0 0 200px 0);
margin-bottom: -200px;
}
.clip-bottom{
clip-path: inset(200px 0 0 0);
margin-top: -200px;
}
.clip-bottom2{
clip-path: inset(400px 0 0 0);
margin-top: -400px;
}
}










/*--流行色INDEX *--提案色　ナビ------------------------------------------------------------------------*/

.Back_number{
margin-top: 20px;
border-top: solid 1px #ccc;
}

.nav_proposal {
flex-wrap: wrap;
display: flex;
}

.nav_proposal li{
position: relative;
font-size: 13px;
box-sizing: border-box;
text-align: center;
line-height: 1.3em;
}
.nav_proposal li,
.nav_proposal:before,
.nav_proposal:after {
width:20%;
margin: 10px 0;
}
.nav_proposal:before,
.nav_proposal:after {
content: "";
display: block;
height: 0;
}
.nav_proposal:before{ 
order: 1; /* アイテムの並び順 */
}


@media screen and (max-width: 1024px) {
	.nav_proposal li{
		width:30%;
	}
	.nav_proposal:after {
	content: none;
	}
}
/*max-width: 1024px*/

@media screen and (max-width: 420px) {
	.nav_proposal {
	justify-content: space-between;
	align-items: center;
	}
	.nav_proposal li{
	width:42%;
}

}





/* ---footer--- */
.ns_footer {
overflow: hidden;
}
.ns_footer div{
float: right;
width: 271px;
}







/* ----新しいレイアウトここから------------------------------------------------------------------------------------------------ */

/* ---- ns_haeder ---------------- */
.ns_head{
display: flex;
justify-content:space-between;
}
.ns_head div {
/*border:  solid 1px #222;*/
}
.ns_logo{
width: 230px;
}
.ns_name{
width:calc( 100% - 520px );
font-size : 11px;
display: flex;
justify-content:space-between;
}

.ns_name h2{
font-size: 16px;
margin-bottom: 8px;
}
.ns_name div:nth-child(2){
width: 110px;
background: #d3d5e1;
display: table;
}
.ns_name div:nth-child(2) p{
display: table-cell;
vertical-align: bottom;
text-align: center;
}
.ns_name div:nth-child(2) img{
vertical-align: bottom;
}
.ns_name div:nth-child(1){
width:calc( 100% - 120px );
}
@media screen and (max-width: 1134px) {
.ns_logo{
width: 23%;
}
.ns_name{
width: 70%;
}
}
@media screen and (max-width: 768px) {
.ns_name,
.ns_head{
display: block;
}
.ns_logo,
.ns_name{
width: 98%;
margin: .5em auto;
}
.ns_name div:nth-child(1),
.ns_name div:nth-child(2){
width: 100%;
margin: .5em 0;
}
.ns_name div:nth-child(1) span{
display: block;
}
.ns_name div:nth-child(2){
margin-top: 20px;
}
}
/*@media screen and (max-width: 768px) {*/




/*-----content--------*/

.proposal02{
display: flex;
flex-wrap: wrap; /* 折返し可 */ 
justify-content: space-between;
}

.proposal02.clom3 section{
width:30%;
margin: 0;
margin-bottom: 30px;
}

.proposal02.clom3::after {
display: block;
content:"";
width:30%;/*最後左寄席にする為使用　参考：https://lifehash.jp/flexbox-justify-content-align-left/*/
height: 0;
}

.proposal02 section div:nth-child(1){
text-align: center;
border: solid 1px #ccc;
}
.proposal02 section div.txt{
margin-top: 15px;
font-size : 11px;
}

.proposal02 a div h3{
margin: 10px auto;
font-weight: 300;
}



@media screen and (max-width: 768px) {
.proposal02.clom3 section{
width:48%;
}
.proposal02.clom3::after {
width:48%;
}
}

@media screen and (max-width: 420px) {
.proposal02.clom3 section{
width:98%;
}
.proposal02.clom3::after {
display:none;
}
}


/* ---ne_footer--- */

.ns_footer {
overflow: hidden;
}
.ns_footer.flexbox01 {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;/*親要素の終点から配置。下揃え。*/
}

.ns_footer.flexbox01 div.qr{
width: 271px;
}
.ns_footer.flexbox01 div.ns_fr{
width: calc( 100% - 300px );
}

@media screen and (max-width: 768px) {
.ns_footer.flexbox01 {
display:block;
width:90%;
margin: auto;
}

.ns_footer.flexbox01 div.ns_fr{
width: 100%;
margin-bottom: 30px;
box-sizing: border-box;
}

}




/**/
.ns_footer div{
}

.ns_footer div.qr{
float: right;
width: 271px;
display: block;
}
@media screen and (max-width: 768px) {

}

/*----table----------------*/



.tbl02{
margin-top: 15px;
font-size:90%;
width:100%;
text-align:left;
border-collapse: separate;
}
.tbl02 th,
.tbl02 td{
box-sizing: border-box;
	padding:0 5px 10px;
	font-weight:normal;
	text-align:left;
}
.tbl02 th{
padding-right: 1.7em;
font-weight: 600;
}


@media screen and (max-width: 768px) {

.tbl02{
width: 100%;
}
.tbl02 th,
.tbl02 td {
display: block;
width: 100%;
}
.tbl02 th{
padding-bottom: 0;
padding-right: 0;
}
.tbl02 td{
padding-bottom: 20px;
}
}