@charset "utf-8";

.submenu ul li a.reform_part:link {background: #FED631;}

h1 { width:100%; text-align:center; font-weight:bold; font-size:25px; letter-spacing:0.05em; margin:0 0 50px 0;}
.div_part { margin-top:0; }
@media screen and (min-width: 960px) {
  .div_part { margin-top:50px; position:relative; overflow:visible;}


}
.p_lead_top {position: relative;}
  .div_h1 {
    height: 250px;
    background: url(../img/top_sp.jpg);
    background-repeat: no-repeat;
    background-size: cover; /* 画面幅いっぱいで表示し、高さも自動調整 */
    background-position: center; /* 画像の中心を固定 */ }
.ul_lineup {display: flex; justify-content: space-between; flex-wrap: wrap; }
.ul_lineup li { width: 100%; margin-bottom: 15px; }


.contents { position:relative; }
.contents .oneder_red { width: 70px; position:absolute; top: -110px; right:0; overflow:visible;}
@media screen and (min-width: 960px) {
  .contents .oneder_red { width:105px; position:absolute; top:-165px; right:0; overflow:visible;}
  .div_h1 {height: 250px;background: url(../img/top.jpg);
        background-repeat: no-repeat;
        background-size: cover; /* 画面幅いっぱいで表示し、高さも自動調整 */
        background-position: center; /* 画像の中心を固定 */
    }
    .ul_lineup li { width: 19%; margin-bottom: 15px; }
    .ul_lineup li strong { font-size: 13px; }
}

.div_yellow { margin:0; }

.contSect_wrap { display:none; }

h1 { width:100%; text-align:center; font-weight:500; font-size:20px; letter-spacing:0.05em; margin:0 0 30px 0; line-height:1.7em; font-weight: bold;}
h1 span { font-size:14px; font-weight:normal; margin-bottom:15px;}
h1 span.sp_reform  { font-size:20px; font-weight:bold; }
.ul_voice { display:flex; justify-content: space-between; margin:50px 0 50px 0; }
.ul_voice li img { width:100%; margin-bottom:10px; }
.ul_voice li strong { width:100%; display:block; }
.sp_date { font-size:14px; color:#7C7878; font-weight:bold; }
.sp_new { font-size:12px; background:#D51315; color:#fff; padding:0 10px; }
@media screen and (min-width: 960px) {
  h1 { font-size:25px; margin-bottom:50px; font-weight:bold; }
  .marginbottom30 { margin-bottom:30px; }
  h1 span { font-size:16px; }
  h1 span.sp_reform  { font-size:25px; }
  .ul_voice { margin:50px 0 150px 0; }
  .ul_voice li { width:32%; }

}

.ul_column3 { margin-bottom:200px; }


/* 詳細ここから */
.p_lead_top { margin-top:-20px; }
/* .photo_top { width:100%; margin-top:20px; margin-bottom:30px; } */
.photo_top { width:100%; margin-bottom:30px; text-align: center; }
.photo_top img { width:100%;}
@media screen and (min-width: 960px) {
.photo_top { width: 960px; margin: 50px auto 30px auto; font-size:14px; font-weight:normal; }
.photo_top img { width: auto; max-width: 100%; height: auto; max-height: 680px; max-width: 100%;}
}


.wrap_gray { width: 100%; background: url(../img/gray_bg.png) repeat-x; background-size: 400px; height: 4vw; }
.wrap_gray_bottom { width: 100%; background: url(../img/gray_bottom.png) repeat-x; background-size: 400px; height: 10vw; }
@media screen and (min-width: 960px) {
.wrap_gray_bottom { width: 100%; background: url(../img/gray_bottom.png) repeat-x; background-size: 400px; height: 4vw; }
}
.bg_gray { background: #F7F4EB; padding: 50px 0; color:#0E2F53; }
.voice_contents { width:90%; margin: 0 auto; }
.voice_contents strong { font-size:16px; }
.voice_contents p { color:black; font-weight:bold; }
.p_voice { margin-bottom:20px; }
@media screen and (min-width: 960px) {
  .p_lead_top { text-align: center; font-size: 16px; }
  .wrap_gray { background-size: 1000px; height: 2vw; }
  .wrap_gray_bottom { background-size: 1000px; margin-bottom:100px; }
  .voice_contents { margin-top:30px; }



}

/* ワンディくん位置 */
.img_chara_all { margin: -50px auto 20px auto; }
.ul_work li img { width:100%; }
.ul_work li span { width:100%; }

/*事例*/
.ul_work { width:100%; display:flex; flex-wrap:wrap; }
.ul_work li { width:100%; margin:0 0 30px 0; text-align: center; }
.ul_work li img { width:100%; }
.ul_work li img { width: auto; max-width: 100%; height: auto; /*max-height: 400px;*/ max-height: 100%; }
.ul_work li span { width:100%; color:#000; text-align: left; margin-top:10px; }
@media screen and (min-width: 960px) {
  .ul_work { width:60%; margin:0 auto; justify-content:space-between; }
  .ul_work li { width:48%; }
  .ul_work li img { width: auto; max-width: 100%; height: auto; /*max-height: 400px;*/ max-height: 100%;}

}

.dl_part { width:100%; display:flex; justify-content:space-between;}
.dl_part dt { width:17%; }
.dl_part dt img { width:100%; }
.dl_part dd { width:80%; }
@media screen and (min-width: 960px) {
  .dl_part { width:800px; margin:30px auto 0 auto;  }
}