@charset "UTF-8";

/* ! 下層ページスタイル ================================================== 
  
タイトル
リスト
検索エリア

下層ページ
- ログイン
- お知らせ詳細
  
-------------------------------------------------- */

/* ! タイトル ================================================== */
.area_head {
  position: relative;
  text-align: center;
}
.area_head > a{
  position: absolute;
  right: 0; top: 50%;
  transform: translate(0,-50%);
  
}
.area_head h2{
  font: 600 32px/1.3em 'Josefin Sans','noto sans japanese',sans-serif;
}
.area_head p{
  margin: 20px 0 0;
  font: 400 15px/1.3em 'noto sans japanese',sans-serif;
}
.area_head h2:after{
  content: attr(data-sub)'';
  display: block;
  font: 300 12px/1.3em 'noto sans japanese',sans-serif;
  margin: 5px 0 0;
}
.area_head [class*="button_"] {
  
}

@media screen and (max-width: 640px){
  .area_head > a:link{
    display: none;
  }
}

/* ! リスト ================================================== */
[class*="list_"] {
  display: flex;
  flex-wrap: wrap;
  margin: -10px;
}
[class*="list_"] > li{
  padding: 10px;
}
[class*="list_"] > li article{
  position: relative;
}
[class*="list_"] > li article > a:empty{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 100%; height: 100%;
  z-index: 1;
  cursor: pointer;
}
/* ログイン_リスト */
[class*="list_"][class*="login"]{
  margin: 20px auto 0;
}
[class*="list_"][class*="login"] > li{
  width: 100%;
  padding: 0 0px;
  display: flex;
  align-items: center;
}
[class*="list_"][class*="login"] > li + li{
  margin: 20px 0 0;
}
[class*="list_"][class*="login"] .head{
  flex: 0 0 170px;
}
[class*="list_"][class*="login"] .cnt{
  flex: 1 1 auto;
}

/* メニュー_リスト */
[class*="list_"][class*="nav"] > li{
  padding: 0 25px;
}
[class*="list_"][class*="nav"] > li.logout a{
  width: 35px;
  height: 25px;
  background: url(../img/ico_logout.svg)no-repeat center;
  background-size: cover; 
  display: block;
}

/* 新着情報_リスト */
[class*="list_"][class*="news"]{
  margin: 20px 0 0;
}
[class*="list_"][class*="news"] > li{
  width: 100%;
  padding: 25px 50px;
}
[class*="list_"][class*="news"] > li + li{
  border-top: solid 1px #eee;
}
[class*="list_"][class*="news"] article{
  display: flex;
}
[class*="list_"][class*="news"] > li a:empty{
  display: block;
}
[class*="list_"][class*="news"] .date{
  flex: 0 0 120px;
}

@media screen and (max-width: 640px){
  [class*="list_"][class*="news"] > li{
    padding: 25px 0;
  }
  [class*="list_"][class*="news"] article{
    flex-direction: column;
  }
  [class*="list_"][class*="news"] .date{
    flex: 0 0 auto;
    margin: 0 0 20px;
  }
}

/* 壁紙_リスト */
[class*="list_"][class*="design"] > li{
  width: 33.33%;
}

[class*="list_"][class*="design"] .img{
  width: 100%;
  padding-top: 55%;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border: solid 1px #ccc;
}
[class*="list_"][class*="design"] .text{
  padding: 10px;
  border: solid 1px #ccc;
  text-align: center;
  transition: all .2s ease;
  -webkit-transition: all .2s ease;
}
[class*="list_"][class*="design"] > li article > a:hover + .img + .text{
  -webkit-box-shadow: 0px 5px 8px rgba(0,0,0,.08);
  box-shadow: 0px 5px 8px rgba(0,0,0,.08);
}

@media screen and (max-width: 768px){
  [class*="list_"][class*="design"] > li{
    width: 50%;
  }
}
@media screen and (max-width: 640px){  
  [class*="list_"][class*="design"] {
    margin: -4px;
  }
  [class*="list_"][class*="design"] > li{
    padding: 4px;
  }
  [class*="list_"][class*="design"] .text .ttl{
    font: 600 13px/1.3em 'noto sans japanese',sans-serif;
  }
}

/* メニュー_リスト(フッター) */
[class*="list_"][class*="menu"][class*="footer"]{
  margin: 0 -25px;
}
[class*="list_"][class*="menu"][class*="footer"] > li{
  width: 50%;
  padding: 0 25px;
  display: flex;
}
[class*="list_"][class*="menu"][class*="footer"] article{
 background: white; 
 padding: 25px 20px;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 100%;
 transition: all .2s ease;
 -webkit-transition: all .2s ease;
}
[class*="list_"][class*="menu"][class*="footer"] > li article:hover{
  -webkit-box-shadow: 0px 5px 8px rgba(0,0,0,.08);
  	  box-shadow: 0px 5px 8px rgba(0,0,0,.08);
}
[class*="list_"][class*="menu"][class*="footer"] .img{
  width: auto;
  min-width: 30px;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
[class*="list_"][class*="menu"][class*="footer"] .img img{
  height: 100px;
}
[class*="list_"][class*="menu"][class*="footer"] > li p{
  padding: 0 0 0 15px;
  flex: 0 0 auto;
}
[class*="list_"][class*="menu"][class*="footer"] > li.design p{
  color: #74BD45;
}
[class*="list_"][class*="menu"][class*="footer"] > li.tool p{
  color: #19A7E8;
}
[class*="list_"][class*="menu"][class*="footer"] > li.training p{
  color: #E92076;
}

@media screen and (max-width: 980px){
  [class*="list_"][class*="menu"][class*="footer"]{
    margin: 0 -10px; 
  }
  [class*="list_"][class*="menu"][class*="footer"] > li{
    padding: 0 10px;
  }
}
@media screen and (max-width: 980px){
  [class*="list_"][class*="menu"][class*="footer"]{
  }
  [class*="list_"][class*="menu"][class*="footer"] > li article{
    flex-direction: column; 
  }
  [class*="list_"][class*="menu"][class*="footer"] > li .ttl{
    padding: 10px 0 0;
  }
}
@media screen and (max-width: 640px){
  [class*="list_"][class*="menu"][class*="footer"]{
    margin: 0 -3px;
  }
  [class*="list_"][class*="menu"][class*="footer"] > li{
    padding: 0 3px;
  }
  [class*="list_"][class*="menu"][class*="footer"] article{
    padding: 10px 15px;
  }
  [class*="list_"][class*="menu"][class*="footer"] > li .ttl{
    font: 600 14px/1.3em 'noto sans japanese',sans-serif;
  }
  [class*="list_"][class*="menu"][class*="footer"] .img img{
    height: 50px;
  }
}

/* タブ_リスト */
[class*="list_tab"]{
  max-width: 1080px;
  margin: 20px auto -5px;
  justify-content: center;
}
[class*="list_tab"] > li{
  position: relative;
}
.container + [class*="list_tab"] > li p{
  cursor: pointer;
}
.list_tab > li.current:before{
  content: '';
  position: absolute;
  left: 50%; bottom: -15px;
  transform: translate(-50%,0);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 5px 10px 5px;
  border-color: transparent transparent #FFFFFF transparent;

}
[class*="list_tab"] > li p{
  font: 300 18px/1.3em 'noto sans japanese',sans-serif;
  padding: 0 5px;
}

[class*="list_tab"][class*="cnt"]{
  flex-direction: column; -webkit-flex-direction: column;
  margin: 0;
}
[class*="list_tab"][class*="cnt"] > li{
  display: none;
}
[class*="list_tab"][class*="cnt"] > li.current{
  display: block;
}
[class*="list_tab"][class*="cnt"] > li .area_cnt{
  margin: 50px 0 0;
}

@media screen and (max-width: 640px){
  .container + [class*="list_tab"]{
    flex-wrap: nowrap;
    margin: -2px;
    margin-top: 10px;
    justify-content: space-around;
  }
  .container + [class*="list_tab"] > li{
    padding: 2px;
  }
  .container + [class*="list_tab"] > li p{
    padding: 15px 0 10px;
    font: 400 12px/1.3em 'noto sans japanese',sans-serif;
  }
  .list_tab > li.current:before{
    bottom: -18px;
    border-width: 0 5px 7px 5px;
  }
}
@media screen and (max-width: 374px){
  .container + [class*="list_tab"] > li p{
    font: 300 3vw/1.3em 'noto sans japanese',sans-serif;
  }
}

/* 管理ツール */
[class*="list_file"]{
  margin: -10px;
}
[class*="list_file"] > li{
  width: 50%;
  padding: 10px;
  display: flex;
}
[class*="list_file"] > li article{
  background: #fafafa;
  border: solid 1px #eee;
  transition: all .2s ease;
  -webkit-transition: all .2s ease;
  display: flex;
  flex-direction: column;
  width: 100%;
}
[class*="list_file"] > li article:hover{
  -webkit-box-shadow: 0px 5px 8px rgba(0,0,0,.05);
  box-shadow: 0px 5px 8px rgba(0,0,0,.05);
}
[class*="list_file"] > li .text{
  flex: 1 1 auto;
  padding: 25px 15px 20px;
}
[class*="list_file"] > li p{
  text-align: left;
  margin: 0;
}
[class*="list_file"] > li .ttl{
  margin: 0 0 20px;
  font: 600 22px/1.3em 'noto sans japanese',sans-serif;
}
[class*="list_file"] > li .description{
  font: 300 12px/1.7em 'noto sans japanese',sans-serif;
}
[class*="list_file"] > li .date{
  font: 300 12px/1.3em 'noto sans japanese',sans-serif;
  letter-spacing: 1px;
  color: #999;
  margin: 10px 0 0;
}
/* サムネイルあり */
[class*="list_file"][class*="type_tool"] > li .img{
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background: #ccc;
  flex: 1 1 100%;
}
[class*="list_file"][class*="type_tool"] > li .img:before{
  content: '' ;
  display: block;
  padding-top: 50%;
}
[class*="list_file"][class*="type_tool"] > li .ttl{
  display: flex;
}
[class*="list_file"][class*="type_tool"] > li .ttl:after{
  content: '';
  margin: 5px 0 0 auto;
  display: block;
  width: 20px; height: 20px;
  background: url(../img/shape/ico_download.svg)no-repeat center;
  background-size: auto 100%;
  opacity: .2;
  transition: all .2s ease;
  -webkit-transition: all .2s ease;
}
[class*="list_file"][class*="type_tool"] > li article:hover .ttl:after{
  opacity: .7;
}

/* ファイルのみ */
[class*="list_file"][class*="type_file"]{
  margin: -2px;
}
[class*="list_file"][class*="type_file"] > li {
  width: 100%;
  padding: 2px;
}
[class*="list_file"][class*="type_file"] > li .ttl{
  font: 600 16px/1.3em 'noto sans japanese',sans-serif;
  margin: 0 0 0px;
}
[class*="list_file"][class*="type_file"] > li .date{
  margin: 0 0 0 auto;
}
[class*="list_file"][class*="type_file"] > li article{
  align-items: center;
  flex-direction: row;
  padding: 10px 30px 10px 10px;
}
[class*="list_file"][class*="type_file"] > li article:before{
  content: '';
  width: 50px; height: 50px;
  background-size: auto 40% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background: url(../img/ico_tool.svg);
}
[class*="list_file"][class*="type_file"] > li .text{
  padding: 0px 0px 0 0px;
  display: flex;
  align-items: center;
}


/* ! 検索エリア ================================================== */
.area_design_page{
  padding: 50px 0 100px;
}
.area_search{
  margin: 0 0 20px;
}
.area_search > div:not(.area_refine){
  display: flex;
  align-items: center;
  padding: 0 260px;
  position: relative;
}
@media screen and (max-width: 950px){
  .area_search > div:not(.area_refine){
    padding: 0 280px 0 0px;
    justify-content: flex-end;
  }
}
@media screen and (max-width: 640px){
  .area_search > div:not(.area_refine){
    padding: 0;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}
/* デザイン数 */
.total_design{
  position: absolute;
  left: 0 ; top: 50%;
  transform: translate(0,-50%);
  font: 500 16px/1.3em 'noto sans japanese',sans-serif;
}
.total_design span{
  padding: 0 3px 0 0;
}
@media screen and (max-width: 640px){
  .total_design{
    position: inherit;
    left: auto; top: auto;
    transform: translate(0,0);
    width: 100%;
    margin: 0 0 15px;
  }
}
/* キーワード検索 */
.area_search .wrap_input{
  flex: 1 1 auto;
  max-width: 340px;
  margin: auto;
  position: relative;
}
.area_search .wrap_input:before,
.area_search .wrap_select:before{
  content: '';
  display: block;
  width: 20px; height: 20px;
  background: url(../img/ico_search.svg)no-repeat center;
  background-size: 20px 20px !important;
  position: absolute;
  right: 15px; top: 15px;
}
.area_search .wrap_input input,
.area_search .wrap_select select{
  font: 500 16px/1.3em 'noto sans japanese',sans-serif;
  padding-left: 15px;
  letter-spacing: 1px;
}
@media screen and (max-width: 950px){
  .area_search .wrap_input{
    margin: 0;
  }  
}
@media screen and (max-width: 768px){
  .area_search .wrap_input{
    max-width: 200px;
  }  
}
@media screen and (max-width: 640px){
  .area_search .wrap_input{
    max-width: none;
    flex: 1 1 auto;
    margin: 0 20px 0 0;
  }  
}
@media screen and (max-width: 520px){
  .area_search .wrap_input{
    width: 100%;
    margin: 0 0 10px;
  }  
}
/* シリーズ */
.area_search .wrap_refine{
  display: flex;
  position: absolute;
  right: 0 ; top: 50%;
  transform: translate(0,-50%);
}
.area_search .wrap_select{
  width: 200px;
  position: relative;
}
.area_search .wrap_select:before{
  right: 7px;
  background: url(../img/ico_select.svg)no-repeat center;
  background-size: 16px 16px !important;
  transform: translate(0);
}
@media screen and (max-width: 640px){
  .area_search .wrap_refine{
    position: inherit;
    left: auto; top: auto;
    transform: translate(0,0);
  }
}
@media screen and (max-width: 400px){
  .area_search .wrap_refine{
    width: 100%;
    justify-content: space-between;
  }
  .area_search .wrap_select{
    width: auto;
    flex: 1 1 auto;
  }
}
/* 詳細検索 */
.more_search{
  width: 50px; height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  margin: 0 0 0 10px;
  cursor: pointer;
}          
.area_refine{
  position: relative;
  height: 0;
  transition: all .2s ease;
  -webkit-transition: all .2s ease;
  background: white;
  overflow: hidden;
  margin: 30px 0 0;
  transition: all .5s ease;
  -webkit-transition: all .5s ease;
}
.area_refine.view{
  height: 127px;;
  margin: 30px 0 50px;
}
.area_refine:before{
  content: '';
  position: absolute;
  right: 18px; top: -13px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 7.5px 15px 7.5px;
  border-color: transparent transparent #ffffff transparent;
  z-index: -1;
}
.area_refine.view:before{
  z-index: 0;
}
.area_refine ul{
  padding: 20px;
  position: relative;
}
.area_refine li{
  padding: 5px 0;
}
@media screen and (max-width: 420px){
  .area_refine.view{
    height: 131px;
    margin: 10px 0 30px;
  }
  .area_refine ul{
    padding: 10px;
  }
  .area_refine li .ttl{
    flex: 0 0 55px;
  }
}
.area_refine li + li{
  border-top: solid 1px #D9D9D9;
  padding: 14px 0 0;
  margin: 14px 0 0;
}
.area_refine li article{
  display: flex;
}
.area_refine li .ttl{
  font: 400 15px/1.3em 'noto sans japanese',sans-serif;
  flex: 0 0 65px;
  padding: 0 0 0 5px;
  display: flex;
  align-items: center;
}
.area_search .wrap_checkbox{
  flex: 1 1 auto;
}
.area_search .wrap_checkbox label{
  position: relative;
  padding: 0 0 0 30px;
  cursor: pointer;
}
.area_search .wrap_checkbox.type_color label {
  margin-right: 5px;
  padding: 0 0 0 20px;
}
.area_search .wrap_checkbox label:before,
.area_search .wrap_checkbox label:after{
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  border-radius: 50%;
  border: none;
  background: #000;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: none;
}
.area_search .wrap_checkbox label:before{
  display: block;
}
.area_search .wrap_checkbox label:after{
  border-right: solid 1px white;
  width: 20px; height: 20px;
  border-radius: 0;
  background: none;
  transform: translate(-37%,-85%) rotate(45deg);
}
.wrap_checkbox label[for="color_brown"]:before{
  background-color: #800000;
}
.wrap_checkbox label[for="color_red"]:before{
  background-color: #FF0000;
}
.wrap_checkbox label[for="color_orange"]:before{
  background-color: #FFA500;
}
.wrap_checkbox label[for="color_yellow"]:before{
  background-color: #FFFF00;
}
.wrap_checkbox input:checked + label[for="color_yellow"]:before{
  border: solid 1px #000;
}
.wrap_checkbox input:checked + label[for="color_yellow"]:after{
  border-color: #000;
}
.wrap_checkbox label[for="color_green"]:before{
  background-color: #008000;
}
.wrap_checkbox label[for="color_water"]:before{
  background-color: #00BFFF;
}
.wrap_checkbox label[for="color_blue"]:before{
  background-color: #0000FF;
}
.wrap_checkbox label[for="color_purple"]:before{
  background-color: #800080;
}
.wrap_checkbox label[for="color_pink"]:before{
  background-color: #FF1493;
}
.wrap_checkbox label[for="color_gray"]:before{
  background-color: #F3F3F3;
}
.wrap_checkbox input:checked + label[for="color_gray"]:before{
  border: solid 1px #000;
}
.wrap_checkbox input:checked + label[for="color_gray"]:after{
  border-color: #000;
}
.wrap_checkbox label[for="color_black"]:before{
  background-color: #000000;
}



/* ! 下層ページ ================================================== */
/* 共通項目 */
.area_info_page{
  padding: 20px;
}
.area_info_page > .container{
  display: flex;
  align-items: center;
  justify-content: center;
}
.area_info_page h2{
  color: white;
  font: 600 40px/1.3em 'noto sans japanese',sans-serif;
}
.area_info_page .img{
  height: 65px; min-width: 30px;
  flex: 0 0 auto;
}
.area_info_page .img img{
  height: 100%; width: auto;
}
.area_info_page p{
  color: white;
  font: 300 18px/1.3em 'noto sans japanese',sans-serif;
  padding: 0 0 0 30px;
}

@media screen and (max-width: 640px){
  .area_info_page {
    padding: 20px 5px;
  }
  .area_info_page .img{
    height: 55px;
  }
  .area_info_page p{
    padding: 0 0 0 20px;
  }
  .area_info_page h2{
    font: 600 20px/1.3em 'noto sans japanese',sans-serif;
  }
} 

/* ログイン_ページ */
.page_login .area_cnt{
  padding: 25px 0 0;
  border-top: solid 1px #000;
  margin: 45px auto 0;
  max-width: 490px;
}
.page_login [class*="btnarea"]{
  margin: 50px 0 0;
}
.page_login h2{
  font: 500 32px/1.3em 'noto sans japanese',sans-serif;
}
@media screen and (max-width: 480px){
  .page_login h2{
    font: 500 28px/1.3em 'noto sans japanese',sans-serif;
  }

}

/* デザイン_ページ */

.area_design_page [class*="list_"][class*="design"] .text{
  background: white;
}
/* 詳細 */
.area_design_detail .img{
  width: 100%;
  padding-top: 60%;
  background: #ccc;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: relative;
}
.area_design_detail .swiper-container{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  height: 100%;
}
.area_design_detail .swiper-slide{
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center  !important;
}
.area_design_detail .text{
  display: flex;
  padding: 40px;
  align-items: center;
  background: #eee;
}
.area_design_detail .text .ttl{
  font: 600 40px/1.3em 'noto sans japanese',sans-serif;
  flex: 0 0 230px;
}
.area_design_detail .text .cnt{
  flex: 1 1 auto;
  padding: 0 0 0 40px;
  font: 300 13px/1.7em 'noto sans japanese',sans-serif;
}
.area_design_detail .btnarea_left{
  margin: -20px -5px 20px;
  display: flex;
}
.area_design_detail .btnarea_left a{
  font: 600 15px/1em 'noto sans japanese', sans-serif;
  margin: 0 5px;
  width: 50%;
/*   max-width: 290px; */
  text-align: center;
  padding: 18px 10px;
}
.area_design_detail .swiper-button-prev,
.area_design_detail .swiper-button-next{
  background: url(../img/ico_arrow_next.svg);
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  top: 50%;
}
.area_design_detail .swiper-button-prev{
  background: url(../img/ico_arrow_prev.svg);
}

@media screen and (max-width: 640px){
  .area_design_detail .text{
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
  }
  .area_design_detail .text .ttl {
    font: 600 15px/1.3em 'noto sans japanese',sans-serif;
    flex: 0 0 auto;
    width: 100%;
    text-align: center;
  }
  .area_design_detail .text .cnt{
    padding: 10px 0 0;
    width: 100%;
    text-align: center;
  }
  .area_design_detail .btnarea_left{
    margin: -20px 0px 10px;
    flex-direction: column;
  }
  .area_design_detail .btnarea_left a{
    width: 100%;
    max-width: none;
    margin: 3px 0;
    padding: 20px 10px;
  }
}
@media screen and (max-width: 430px){
  .area_design_detail .btnarea_left{
    margin: -20px 0px 10px;
  }
  .area_design_detail .btnarea_left a{
    max-width: none;
    margin: 3px 0;
  }
}

/* ツール_ページ */
.area_tool_page{
  padding: 50px 0;
}


/* 新着情報_ページ */
.sort_date{
  display: flex;
  align-items: center;
  margin: 50px 0;
}
.sort_date .wrap_select{
  margin-left: auto;
  flex: 0 0 120px;
}
.sort_date .wrap_select select{
  background: #eee;
  font: 400 14px/1.3em 'noto sans japanese',sans-serif;
  padding: 12px;
}
.area_news_page [class*="list_"][class*="news"] {
  padding: 25px 50px;
  background: white;
}
.area_news_page [class*="list_"][class*="news"] > li{
  padding: 25px 0;
}
.area_news_page [class*="list_"][class*="news"] > li p{
  font: 500 15px/1.3em 'noto sans japanese',sans-serif;
}
[class*="list_"][class*="news"] > li article > a:hover + p + p{
  text-decoration: underline;
}
@media screen and (max-width: 640px){
  .area_news_page [class*="list_"][class*="news"]{
    padding: 10px 30px;
  }
}

/* 詳細 */
.area_news_detail .wrap_cnt{
  padding: 50px 50px 70px;
  background: white;
  margin: 50px auto;
  max-width: 750px;
}
.area_news_detail .wrap_cnt h3{
  margin: 40px 0 20px;
  font: 900 22px/1.3em 'noto sans japanese',sans-serif;
  border-bottom: solid 1px #ddd;
  padding: 20px 10px 20px 10px;
  position: relative;
}
.area_news_detail .wrap_cnt p{
  font: 300 13px/1.7em 'noto sans japanese',sans-serif;
  padding: 0 10px;
}
.area_news_detail .wrap_cnt p + p{
  margin: 30px 0 0;
}
.area_news_detail .btn_{
  padding: 15px;
  font: 500 18px/1.7em 'noto sans japanese',sans-serif;
  width: 100%;
  max-width: 230px;
}


/* ! カベガミ印刷発注 ================================================== */
/* ! ====  レイアウト  ==== */
.area_design_order .area_cnt{
  margin: 100px 0 0;
}
.area_order{
  max-width: 500px;
  margin: auto;
}
.list_form.type_wall + .list_form.type_wall{
  margin: -40px -15px 0;
}

/* ! ====  リスト  ==== */
.area_order [class*="list_form"]{
  flex-direction: column;
  margin: -15px;
}
.area_order [class*="list_form"] > li{
  width: 100%;
  padding: 15px;
}
.area_order [class*="list_form"] > li[id*="form"] {
  padding: 0 15px;
}
.area_order [class*="list_form"] .ttl_form{
  margin: 0 0 10px;
  position: relative;
}
.area_order [class*="list_form"] .ttl_form .ttl{
  font: 600 18px/1.3em 'noto sans japanese',sans-serif;
}

/* 施工面登録 */
.area_order [class*="list_form"] > li[id*="form"] > article{
  background: #f7f7f7;
  padding: 20px 15px;
  border: solid 1px #eee;
}
.area_order [class*="list_form"] > li[id*="form_color"]{
  margin: 30px 0 0;
}
.area_order [class*="list_form"] > li[id*="form_size"] > article{
  padding: 10px 15px;
  margin: -1px 0;
  position: relative;
  z-index: 1;
  border-top: none;
  border-bottom: none;
}
.area_design_order .btnarea .btn_add{
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 13px 10px;
  font: 400 15px/1.3em 'noto sans japanese',sans-serif;
  background: #eee;
  color: #333;
  border: solid 1px #ccc;
}
.area_design_order .btnarea .btn_add:before{
  content: '+';
  margin: 0 10px 0 0;
  font: 500 18px/1em 'noto sans japanese',sans-serif;
}
.area_design_order .btnarea .btn_add:hover{
  background: #000;
  color: white;
  border-color: #000;
}


/* ! ====  フォーム  ==== */
.area_order [class*="list_form"] input[type="text"],
.area_order [class*="list_form"] textarea{
  background: #F2F2F2;
  border: solid 1px #ccc;
  height: 50px;
  border-radius: 0;
}
.area_order [class*="list_form"] textarea + span{
  font: 500 14px/1.3em 'noto sans japanese',sans-serif;
  margin: 10px 0 0;
}

/* wrap */
.area_order [class*="list_form"] .wrap_input,
.area_order [class*="list_form"] .wrap_radio{
  display: flex;
}
.area_order [class*="list_form"] .wrap_input.col{
  flex-direction: column;
}
.area_order [class*="list_form"] .wrap_radio{
  width: 100%;
  margin: -5px;
}
.area_order [class*="list_form"] .wrap_radio label{
  width: 33.33%;
  padding: 5px;
  margin: 0;
  cursor: pointer;
}
.area_order [class*="list_form"] .wrap_radio .img{
  width: 100%;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background: #eee;
  margin: 0 0 10px;
}
.area_order [class*="list_form"] .wrap_radio .img:before{
  content: '';
  display: block;
  width: 100%;
  padding-top: 57%;
}
.area_order [class*="list_form"] .wrap_radio span{
  display: block;
  padding: 0 0 0 25px;
  position: relative;
  font: 500 14px/1.2em 'noto sans japanese',sans-serif;
}
.area_order [class*="list_form"] .wrap_radio span:before,
.area_order [class*="list_form"] .wrap_radio span:after{
  content: '';
  width: 15px; height: 15px;
  border: solid 1px #eee;
  background: #eee;
  position: absolute;
  left: 0; top: 50%;
  transform: translate(0,-50%);
  border-radius: 50%;
}
.area_order [class*="list_form"] .wrap_radio span:after{
  background: #ffffff;
  width: 7px;
  height: 7px;
  left: 1px;
  border: solid 4px #0089ff;
  display: none;
}
.area_order [class*="list_form"] .wrap_radio input:checked + label span:after{
  display: block;
}

/* サイズ */
.area_size_form > .wrap_input{
  margin: 0 -3px;
}
.area_size_form .wrap_input[class*="unit"]{
  padding: 0 3px;
}
.area_size_form input{
  width: 100px;
  flex: 0 0 100px;
  margin: 0 7px 0 0;
  background: white !important;
  text-align: center;
  font: 500 18px/1.3em 'noto sans japanese',sans-serif;
}
.area_size_form span{
  font: 500 15px/1.2em 'noto sans japanese',sans-serif;
}
.area_size_form .width:after,
.area_size_form .hight:after{
  content: '×';
  margin-left: auto;
  font: 900 27px/1.2em 'noto sans japanese',sans-serif;
}
.area_size_form .hight:after{
  content: '=';
}

/* ファイル */
.area_file_form label{
  padding: 10px 20px;
  font: 500 15px/1.3em 'noto sans japanese',sans-serif;
  background: #eee;
  border: solid 1px #ddd;
  color: #aaa;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 150px;
  height: 50px;
  cursor: pointer;
}
.area_file_form label + span{
  font: 500 14px/1.3em 'noto sans japanese',sans-serif;
  display: block;
  margin: 10px 0 0;
}

/* 発注する */
.area_order .btnarea_center{
  margin: 100px 0 0;
}
.area_order .btnarea_center .btn_green{
  background: #74BD45;
  color: white;
  font: 600 24px/1.3em 'noto sans japanese',sans-serif;
  border-radius: 0;
  padding: 13px 0;
  max-width: 300px;
  border: solid 1px #74BD45;
  transition: all .2s ease;
  -webkit-transition: all .2s ease;
}
.area_order .btnarea_center .btn_green:hover{
  background: white;
  color: #74BD45;
  border: solid 1px #74BD45;
}