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

@media screen and (min-width: 640px) {
.pc {    display: block;  }
.tab {    display:block;  }
.sp {    display: none;  }
}
@media screen and (max-width: 639px) {
.pc {    display: none;  }
.tab {    display: none;  }
.sp {    display: block;  }
}


/* デザインのポイント */
#contents,
#design_point2
{font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	}

#design_point2 h2{
text-align: center;
font-size:40px;
font-weight:bold;
margin:120px 30px 30px;
}

ul.design_point2_Nav{
	max-width:800px;
	display: flex;
	justify-content: space-around;
	border-bottom: 1px solid #ccc;
	padding-bottom:30px;
	margin:0 auto 30px;
	}
.design_point2_Nav li {
display:block;
list-style: none;
}

.design_point2_Nav li a img {
width: 100px;
}

.design_point2_Nav li a:hover{/* ページリンクホバー画像 */
display:block;
width: 100px;
height:100px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.design_point2_Nav li a:hover img{
display: none; 
}
.design_point2_Nav li.p01 a:hover{background-image: url(../img_point/point_btn_01_.png);}
.design_point2_Nav li.p02 a:hover{background-image: url(../img_point/point_btn_02_.png);}
.design_point2_Nav li.p03 a:hover{background-image: url(../img_point/point_btn_03_.png);}
.design_point2_Nav li.p04 a:hover{background-image: url(../img_point/point_btn_04_.png);}
.design_point2_Nav li.p05 a:hover{background-image: url(../img_point/point_btn_05_.png);}

section#point_title h3{
text-align: center;
font-size:24px;
font-weight: bold;
margin-bottom:30px;
}
section#point_title h3 img{
margin:15px 0 30px 0;
width:60px;
}
section#point_title p{
text-align: center;
font-size:18px;
font-weight: bold;
margin:0 20px 30px;
line-height: 1.5;
}


ul.design_point2_PageNav {  /**ページ内リンク　ボタン**/
	display: flex;
	justify-content: center;
	margin: 0px auto 90px;
	}
.design_point2_PageNav li {
list-style: none;
display: block;
border: 1px solid #ccc;
margin:0 15px;
padding:10px 10px 20px 10px;
text-align: center;
font-size:16px;
font-weight:  bold;
overflow: hidden;
position: relative;
line-height: 120%;
}
.design_point2_PageNav li:hover{
border: 1px solid #E60012;
line-height: 160%;
}
.design_point2_PageNav li a{
text-decoration: none;
color: #333;
position: relative;
}
.design_point2_PageNav li a:after{
content: "";
position: absolute;
bottom: -20px;
left: 0;
border: 6px solid transparent;
border-top: 6px solid #E60012;
}



.design_point2_PageNav li span,/* -----赤い数字------ */
.design_point2_Sample li span,
.design_point2_Sample span{
color:#E60012;
}



/* --------------デザインのポイント　画像サンプル部分　見出し------------- */
.design_point2_Sample {
clear: both;
max-width: 1080px;
margin: 0 auto;
}

.design_point2_Sample h4{
display:block;
font-size:28px;
font-weight: bold;
float:left;
margin:0 30px 30px;
}
.design_point2_Sample p{
display:block;
max-width:500px;
font-size:14px;
margin:0 40px 30px 0;
float:right;
line-height: 1.5;
}

/* --------------デザインのポイント　画像サンプル部分　スライダー------------- */

.design_point2_Sample01 ,
.design_point2_Sample02 ,
.design_point2_Sample03 ,
.design_point2_Sample04 ,
.design_point2_Sample05 {
clear: both;
width:85%;
padding:40px 40px 20px;
background-color: #ececec;
margin-bottom:60px;
}

/* ------デザインのポイント　画像サンプル部分　奇数右寄せ、偶数左寄せ------ */
.design_point2_Sample01,
.design_point2_Sample03,
.design_point2_Sample05{ 
float:right;
border-radius: 0 0 0 40px;
}

.design_point2_Sample02,
.design_point2_Sample04{ 
float:left;
border-radius: 0 0 40px 0;
}

.design_point2_Sample01 ul,
.design_point2_Sample03 ul,
.design_point2_Sample05 ul{
width:100%;
display: flex;
overflow-x: scroll;
}

.design_point2_Sample02 ul,
.design_point2_Sample04 ul{
margin-left:10%;
display: flex;
overflow-x: scroll;
}

.design_point2_Sample01 li,
.design_point2_Sample02 li,
.design_point2_Sample03 li,
.design_point2_Sample04 li,
.design_point2_Sample05 li{
list-style: none;
}

.design_point2_Sample01 li img,
.design_point2_Sample02 li img,
.design_point2_Sample03 li img,
.design_point2_Sample04 li img,
.design_point2_Sample05 li img{
max-width:440px;
max-height:310px;
margin:0 20px 20px 20px;
}


p.design_point_last{
clear:both;
text-align:center;
margin:0 20px 60px;
font-size:20px;
font-weight:bold;
line-height: 1.5;
}






/* //////////////////////////////////////////////////////----------------------------------------SPレイアウト -----------------------------------//////////////////////////////////////////////////////////////////////// */

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

/* contents 共通部分 */
#design_point2{margin:0 10px;}
#design_point2 h2 {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin: 60px 0;
}
section#point_title p {
    text-align: left;
    font-size: 14px;
    margin: 0 10px 60px;
    line-height: 1.5;
}
.design_point2_Sample p{
margin:0 10px 20px;
}

.design_point2_Sample h4{
display:block;
font-size:20px;
font-weight: bold;
margin:0 10px 30px;
}

ul.design_point2_PageNav{
display:none;
}
.design_point2_Sample01, 
.design_point2_Sample02, 
.design_point2_Sample03, 
.design_point2_Sample04, 
.design_point2_Sample05 {
clear: both;
width: 90%;
padding: 20px;
margin-bottom: 60px;
}
.design_point2_Sample01,
.design_point2_Sample03,
.design_point2_Sample05{ 
float:none;
border-radius: 0 ;
}

.design_point2_Sample02 ul,
.design_point2_Sample04 ul{
margin-left:0;
display: flex;
overflow-x: scroll;
}
.design_point2_Sample02,
.design_point2_Sample04{ 
float:none;
border-radius: 0 ;
}

.design_point2_Sample01 li img,
.design_point2_Sample02 li img,
.design_point2_Sample03 li img,
.design_point2_Sample04 li img,
.design_point2_Sample05 li img{
max-width:400px;
max-height:300px;
margin:0 20px;
}
p.design_point_last{
margin:0 10px 60px;
font-size:16px;
}


}
/* -----------------------------SPレイアウトここまで ----------------------------- */