@charset "shift_jis";
/* CSS Document */

.inner_content{width:900px}

#natsu_coordinate  * {
	font-family:"Century Gothic","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	
}
/*==========================*/
#natsu_coordinate .pc { display: block!important; }
#natsu_coordinate .smp { display: none!important; }
#natsu_coordinate ul{font-size:0;}
#natsu_coordinate ul li{font-size: initial;}
#natsu_coordinate ul a{display: block;}
#natsu_coordinate ul a:hover{opacity: 0.8;}

#natsu_coordinate ul[class^="navi_"] li a,
#natsu_coordinate ul[class^="navi_"] li:hover::after,
#natsu_coordinate ul[class^="cate-link_"] a,
#natsu_coordinate ul a:hover,
#natsu_coordinate div.pagetop,
#natsu_coordinate ul.type li::after,
#natsu_coordinate ul.type li
{transition: 0.3s;}

/*============= 看板下ディスクリプション =============*/
#natsu_coordinate .desc{
	margin:20px 0;
	text-align:center;
	color: #154f81;
}


/*============= 部屋作りのポイント =============*/
#natsu_coordinate .point_title{
	font-size:29px;
    color: #168ed9;
    padding: 0;
    margin:20px 0;
    position: relative;
    display: flex;
    align-items: center;
    
    }

#natsu_coordinate .point_title span {
    display: block;
    padding: 0;
    margin: 0;
    width:570%;
    text-align: center;
    font-family: serif !important;
    font-weight: bold;
}

#natsu_coordinate .point_title:before,
#natsu_coordinate .point_title:after {
  content: "";
  width: 100%;
  height:60px;
  margin: 0;
  background: #fff;
  flex-grow: 1;
  background-image: -webkit-repeating-linear-gradient(135deg, #9ac8e5, #9ac8e5 1px, transparent 2px, transparent 5px);
  background-image: repeating-linear-gradient(-45deg, #9ac8e5, #9ac8e5 1px, transparent 2px, transparent 5px);
  background-size: 7px 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}


/*============= 背景 =============*/

#natsu_coordinate .bg{
 background: rgb(255,255,255);
background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(244,248,252,1) 55%);
padding: 0 0 10px 0;
margin: 0 0 40px 0;

}


/*============= ナビ =============*/

#natsu_coordinate ul.type {
    overflow: hidden;
    margin: 0 auto 22px auto;
    text-align: center;

}

#natsu_coordinate ul.type li {
    display: inline-table;
    margin: 0 4px;
    text-align: center;
    width: calc((100% - 24px) /3);
    position: relative;
    border-radius: 5px;
    
}


#natsu_coordinate ul.type li a {
    display:table-cell;
    vertical-align:middle;
    color: #fff;
    padding: 15px 0 25px 0;
    font-size: 18px;
    margin: 0;
    
   
}

#natsu_coordinate ul.type li:nth-child(1) {
    background: #52bde4;

}
#natsu_coordinate ul.type li:nth-child(2) {
    background: #36c1ba;

}
#natsu_coordinate ul.type li:nth-child(3) {
    background:#1675d6;

}

#natsu_coordinate ul.type li span{
  font: italic small-caps 20px cursive;
  margin-right: 5px;

}

#natsu_coordinate ul.type li::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 50%;
    display: inline-block;
    width: 6px;
    height: 6px;
    border: 1px solid;
    border-color: transparent transparent #fff #fff;
    transform: rotate(-45deg);
}

#natsu_coordinate ul.type li:hover::after  {
   bottom: 6px;
 
}

#natsu_coordinate ul.type li:hover {
    background: #98b0b9;

}




/*============= 見出し =============*/

#natsu_coordinate div[class^="ti_"]{
    text-align: center;
    font-size: 26px;
    font-weight: bold;
    padding:10px 0;
    }
    
#natsu_coordinate div[class^="ti_"] span{
    font: italic small-caps 27px cursive;
    margin-right: 5px;
    }

#natsu_coordinate .ti_1 {
    color: #52bde4;

}
#natsu_coordinate .ti_2 {
    color: #36c1ba;

}
#natsu_coordinate .ti_3 {
    color:#1675d6;

}


    
#natsu_coordinate h3[class^="type_"]{
    color: #fff;
    font-size: 20px;
    padding: 16px 0;
    font-weight: normal;
    text-align: center;
    margin: 0 0 15px 0;
}

#natsu_coordinate h3.type_1{
    background: #52bde4;
}

#natsu_coordinate h3.type_2{
    background:#36c1ba;
}

#natsu_coordinate h3.type_3{
    background: #1675d6;
}
#natsu_coordinate .type_txt{
    color:#174168;
    text-align: center;
    font-family: serif !important;
    font-weight: bold;
    font-size: 18px;
    padding:15px 0;

}


/*小見出し*/
#natsu_coordinate h4{
    color: #fff;
    font-size: 19px;
    padding: 10px 0;
    margin:0 0 10px 0;
    font-weight: normal;
    text-align: center;
    letter-spacing: 2px;
    background: rgb(82,112,188);
background: linear-gradient(90deg, rgba(82,112,188,1) 32%, rgba(50,204,202,1) 100%);
}
#natsu_coordinate .sub{
    color: #5076bd;
    font-size: 18px;
    margin:20px 0 0 0;
    text-align: center;

}

/****** Q-max ******/
#natsu_coordinate .qmax{
    color: #324d68;
    border-radius: 30px;
    width: 96%;
    text-align: center;
    margin: 20px auto;
    padding: 0 0 8px 0;
    background: #f0f3f9;
    border: 1px dashed;
}
#natsu_coordinate .qmax h5{
    font-size: 17px;
    background: #fef542;
    color: #1675d6;
    display: inline;
    padding: 8px 17px;
    border-radius: 50px;
    position: relative;
}

#natsu_coordinate .qmax h5::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -7px;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #fef542 transparent transparent transparent;
  border-width: 7px 7px 0 7px;
}

#natsu_coordinate .qmax p{
   font-size: 16px;
   margin: 10px 0 0 0;
}

#natsu_coordinate .qmax p br{
   display:none;
}



/*============= カラム =============*/
/*共通*/
#natsu_coordinate ul[class^="col_"] {
    text-align: center;
}
#natsu_coordinate ul[class^="col_"] > li{
    display: inline-block;
    /*background: #fff;*/
}

#natsu_coordinate ul[class^="col_"] > li p{/*商品名*/
    font-size:15px;
    margin:5px 0 0 0;
    line-height: 1.3em;
}
#natsu_coordinate ul[class^="col_"] li a img{/*画像*/
    width:auto;
    border: 1px solid #c9d9e7;
 
}

/*1カラム*/
#natsu_coordinate .col_1 li a p{
   display: inline-block;
   margin:0 4px;
   
}

/*2カラム*/
#natsu_coordinate ul.col_2{
    margin-top:30px;
}
#natsu_coordinate ul.col_2 > li{
    width: 440px;
    margin: 0 7px 20px 0;
}
#natsu_coordinate ul.col_2set > li{
    width: calc((100% - 70px) /2);
    margin: 0 15px 0 0;
}

#natsu_coordinate ul[class^="col_2"] > li:nth-child(2n){/* .col_2 .col_2set*/
    margin:0 0 0 0;
}


/*アイコン*/
#natsu_coordinate ul[class^="col_"] .icon{
 overflow: hidden;
 display: block;

}

#natsu_coordinate ul[class^="col_"] .icon > li{
    display: inline-block;
    color: #276da9;
    font-size: 14px;
    padding: 1px 6px 3px 6px;
    width: auto;
    margin: 10px 3px 0 0;
    font-family: 'Noto Sans JP', sans-serif;
    background: #ffffff;
    border: 1px solid;
}


/*============= 共通 価格プロ =============*/

#natsu_coordinate .buy_price {
    position: relative;
    display: inline-block;
}
#natsu_coordinate .buy_price::after {
    content: '';
    position: absolute;
    bottom: 10px;
    right:-20px;
    display: inline-block;
    width: 4px;
    height: 4px;
    border: 2px solid;
    border-color: transparent #ef4867 #ef4867 transparent;
    transform: rotate( -45deg );
}

#natsu_coordinate .buy_price li{
	display: inline;
 }
#natsu_coordinate li.motoprice,
#natsu_coordinate span.spesicalprice {
	display: none;
}

#natsu_coordinate li.price {
	color: #ef4867;
	font-size: 25px;
	border: none;
	font-weight: bold;
	margin:0;
	background: none;

}
#natsu_coordinate li.intax  {
	font-size: 11px;
	color:#ef4867;
	background: none;
	margin: 0;
}

/*============= その他はこちら =============*/

#natsu_coordinate ul[class^="cate-link_"]{
	margin:10px auto;
	text-align:center;
}

#natsu_coordinate ul[class^="cate-link_"] li a{
	font-size: 16px;
    display: block;
    padding: 9px 0;
    text-decoration: none;
    background: #92a3b3;
    color: #fff;
    position: relative;
    border-radius: 7px;
    margin: 0 15px;
    border: 1px solid;
}

#natsu_coordinate ul[class^="cate-link_"] li {
    display: inline-block;
    margin: 0 0 10px 0;
}

#natsu_coordinate .cate-link_1 li {/*1カラム*/
	 width: 80%;
}
#natsu_coordinate .cate-link_2 li {/*2カラム*/
	 width: calc((100% - 40px) /2);
}
#natsu_coordinate .cate-link_3 li {/*3カラム*/
	 width: calc((100% - 19px) /3);
	 border-top: 1px dashed #d9dbc2;
	 padding: 14px 0 0 0;
}


#natsu_coordinate ul[class^="cate-link_"] li a:after{
	content: '';
	position:absolute;
	top:30%;
	right:5px;
    display: inline-block;
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-left-color:#fff;
}

#natsu_coordinate ul[class^="cate-link_"] li a:hover{
    background:#df9494;
    
}

/*===========ページトップ=============*/
#natsu_coordinate div.pagetop{
    position: fixed;
    bottom: 5%;
    right: 2%;
    z-index: 99999999;
    width:auto;
    opacity: 0.9;
    }
#natsu_coordinate div.pagetop:hover{
    bottom: 6%;
    }


#natsu_coordinate .smp{display: none;}