@charset "utf-8";

/* =============================================
	濱崎塾 リニューアル時の追記CSS
============================================= */
/*-----------------------------
サイト共通
-----------------------------*/
.section_hamazaki{
 font-size: 1.6rem;
 width: 94%;
 max-width: 980px;
 margin: 6em auto 0 auto;
 padding: 2em;
 background-color: #fff;
}

/*****
見出し系
*****/
.ttl_type01{
 display: flex;
 align-items: flex-end;
 font-size: 3rem;
 line-height: 1;
 margin-bottom: 1em;
 padding: 0 1em 0.1em 1em;
 background-color: transparent;
 background-image: linear-gradient(to top, #e50012 0, #e50012 0.5em, transparent 0.5em);
}
.ttl_type01 .ttl_eng{
 display: inline-block;
 font-style: oblique;
 color: #000;
}
.ttl_type01 .ttl_jp{
 display: inline-block;
 font-size: 0.8em;
 color: #fff;
 margin: 0 0 0 1em;
 padding: 0.5em 1em;
 border-radius: 0.25em;
 background-color: #000;
}

/*****
リンクボタン
*****/
.btn_nav{
 font-size: 1.6rem;
 font-weight: bold;
 line-height: 1;
 text-align: center;
 margin: 1em auto;
}
.btn_nav a{
 display: inline-block;
 color: #fff;
 padding: 1em 3em 1em 1.5em;
 border-radius: 0.5em;
 background-image: url("/nikken/guidance/img/icon_arrow.png");
	background-repeat: no-repeat;
	background-size: 1em auto;
	background-position: right 1em center;
 position: relative;
}
.btn_nav a::after{
 content: '';
 display: block;
 width: 100%;
 height: 100%;
 border: solid 2px #000;
 border-radius: 0.5em;
 position: absolute;
 top: -2px;
 left: -2px;
 transform: translate(-0.25em, -0.25em);
 transition: transform 0.5s;
}
.btn_nav a:hover{
 text-decoration: none;
}
.btn_nav a:hover::after{
 transform: translate(0, 0);
}

.btn_nav a.btn_bg_red{
 border: solid 2px #e50012;
 background-color: #e50012;
}

/*-----------------------------
index
-----------------------------*/
/*****
濱崎塾とは
*****/
.hama_about{
 display: flex;
}
.hama_photo{
 flex-shrink: 0;
 width: 150px;
 margin-right: 2em;
}

/*****
コンテンツナビ
*****/
.nav_content{}
.nav_content ul{
 display: flex;
 justify-content: space-between;
}
.nav_content ul li{
 font-size: 1.6rem;
 font-weight: bold;
 text-align: center;
 width: 19%;
}
.nav_content ul li a{
 display: flex;
 justify-content: center;
 align-items: center;
 color: #fff;
 width: 100%;
 height: 100%;
 padding: 0.5em;
 border: solid 2px;
 border-radius: 0.5em;
 position: relative;
}
.nav_content ul li a::after{
 content: '';
 display: block;
 width: 100%;
 height: 100%;
 border: solid 2px #000;
 border-radius: 0.5em;
 position: absolute;
 top: -2px;
 left: -2px;
 transform: translate(-0.35em, -0.35em);
 transition: transform 0.5s, border 0.5s;
}

.nav_content a.nav_bg_all{
 border-color: #e50012;
 background-color: #e50012;
}
.nav_content a.nav_bg_advice{
 border-color: #99230c;
 background-color: #99230c;
}
.nav_content a.nav_bg_video{
 border-color: #0c4499;
 background-color: #0c4499;
}
.nav_content a.nav_bg_quest{
 border-color: #0c996c;
 background-color: #0c996c;
}
.nav_content a.nav_bg_build{
 border-color: #99690c;
 background-color: #99690c;
}

.nav_content a:hover{
 text-decoration: none;
}
.nav_content a:hover::after{
 transform: translate(0, 0);
}

.nav_content a.nav_bg_all:hover::after{
 border-color: #e50012;
}
.nav_content a.nav_bg_advice:hover::after{
 border-color: #99230c;
}
.nav_content a.nav_bg_video:hover::after{
 border-color: #0c4499;
}
.nav_content a.nav_bg_quest:hover::after{
 border-color: #0c996c;
}
.nav_content a.nav_bg_build:hover::after{
 border-color: #99690c;
}

.nav_content a.show_box::after{
 display: none;
}
.nav_content a.show_box::before{
 content: '';
 display: block;
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 1em 1em 0 1em;
 border-color: transparent;
 position: absolute;
 top: 100%;
 left: 50%;
 transform: translateX(-50%);
}
.nav_content a.nav_bg_all.show_box::before{
 border-top-color: #e50012;
}
.nav_content a.nav_bg_advice.show_box::before{
 border-top-color: #99230c;
}
.nav_content a.nav_bg_video.show_box::before{
 border-top-color: #0c4499;
}
.nav_content a.nav_bg_quest.show_box::before{
 border-top-color: #0c996c;
}
.nav_content a.nav_bg_build.show_box::before{
 border-top-color: #99690c;
}

/***バックナンバーの表示エリア***/
#cont_all{}
#cont_advice{}
#cont_video{}
#cont_quest{}
#cont_build{}

.menu_area{
 margin: 1em auto 0 auto;
 padding: 2em;
 border: solid 2px;
}
#cont_all.menu_area{
 border-color: #e50012;
}
#cont_advice.menu_area{
 border-color: #99230c;
}
#cont_video.menu_area{
 border-color: #0c4499;
}
#cont_quest.menu_area{
 border-color: #0c996c;
}
#cont_build.menu_area{
 border-color: #99690c;
}

/***タブのjsクラス***/
/*タブのナビゲーションエリア*/
.tab_nav{}

/*表示中のタブ*/
.show_box_parent{}
.show_box{
 cursor: default;
}

/*内容表示エリア*/
.tab_box{}

/*初期表示の内容*/
.tab_box_show{}
/***end タブのjsクラス***/


/*****
バックナンバーリスト表示
*****/
.ttl_bkn{
 font-size: 2.4rem;
 color: #000;
 margin-bottom: 1em;
 padding: 0.25em 1em;
 border-bottom: solid 4px #f7cc06;
 background-image: radial-gradient(#eee 2px,transparent 2px, transparent 10px);
 background-size: 10px 10px;
}

.bk_num_list{
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
}

.bk_num_list li{
 font-size: 1.8rem;
 font-weight: bold;
 width: 49%;
 margin: 2em 0 1em 0;
 border: solid 4px #000;
 border-radius: 1em;
 background-color: #fff;
 box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.2);
 position: relative;
 transition: background 0.5s;
}
.bk_num_list li::before{
 display: block;
 color: #fff;
 padding: 0.25em 0.5em;
 border-radius: 0.5em;
 position: absolute;
 top: 0;
 left: 0.5em;
 transform: translate(0%, -50%) rotateZ(-15deg);
 transform-origin: left bottom;
}
.bk_num_list li::after{
 content: '＞';
 display: block;
 position: absolute;
 top: 50%;
 right: 0.5em;
 transform: translateY(-50%);
}
.bk_num_list li:hover{
 background-color: #f6c8cb;
}
.bk_num_list li:hover::before{
 transform: translate(0%, -50%) rotateZ(-5deg);
}

.bk_num_list li a{
 display: block;
 color: #333;
 height: 100%;
 padding: 1em 2em 3em 1em;
 border-radius: 1em;
 background-repeat: no-repeat;
 background-position: right 2em bottom 0.5em;
 background-size: auto 3em;
 position: relative;
}
.bk_num_list li a:hover{
 text-decoration: none;
}


/***カテゴリー***/

/*アドバイス*/
.cate_advice{}
.cate_advice::before{
 content: 'アドバイス';
 background-color: #99230c;
}
.cate_advice a{
 background-image: url("../img/bg_advice.png");
}

/*動画アドバイス*/
.cate_video{}
.cate_video::before{
 content: '動 画';
 background-color: #0c4499;
}
.cate_video a{
 background-image: url("../img/bg_video.png");
}

/*質問*/
.cate_quest{}
.cate_quest::before{
 content: '質 問';
 background-color: #0c996c;
}
.cate_quest a{
 background-image: url("../img/bg_quest.png");
}

/*建物*/
.cate_build{}
.cate_build::before{
 content: '建物紹介';
 background-color: #99690c;
}
.cate_build a{
 background-image: url("../img/bg_build.png");
}

/***カテゴリー検索***/
.select_cate{
	margin-bottom: 2em;
}
.select_cate select{
	font-size: 1.6rem;
	padding: 0.5em;
	min-width: 10em;
}

/***下位カテゴリー***/
.cate2_keikaku{}
.cate2_houki{}
.cate2_kouzou{}
.cate2_sekou{}
.cate2_seizu{}
.cate2_sonota{}

.cate2_keikaku a::after,
.cate2_houki a::after,
.cate2_kouzou a::after,
.cate2_sekou a::after,
.cate2_seizu a::after,
.cate2_sonota a::after{
 display: block;
 font-size: 0.85em;
 line-height: 1;
 color: #fff;
 margin: 0;
 padding: 0.5em;
 border-radius: 0.5em;
 position: absolute;
 bottom: 0.5em;
 left: 1em;
}

.cate2_keikaku a::after{
 content: '計画';
 background-color: #ca4a55;
}
.cate2_houki a::after{
 content: '法規';
 background-color: #ca834a;
}
.cate2_kouzou a::after{
 content: '構造';
 background-color: #cac24a;
}
.cate2_sekou a::after{
 content: '施工';
 background-color: #74ca4a;
}
.cate2_seizu a::after{
 content: '製図';
 background-color: #4a83ca;
}
.cate2_sonota a::after{
 content: 'その他';
 background-color: #ca4a92;
}


/***ページネーション***/
.page_nation{
 display: flex;
 justify-content: center;
 margin-top: 2em;
}
.page_nation li{
 color: #858585;
 margin: 0 1em;
 padding: 0.25em 0.5em;
 border: solid 1px #858585;
 cursor: pointer;
}
.page_nation li.now_page{
 color: #fff;
 border: solid 1px #000;
 background-color: #000;
 cursor: default;
}

/*****
建築用語集
*****/
.nav_glossary{
 display: flex;
 justify-content: center;
}
.nav_glossary .img_glossary{
 flex-shrink: 0;
 width: 140px;
 margin-left: 2em;
}

/*****
お知らせ
*****/


/* ===========================================
	MediaQueries
=========================================== */
/* PC----------------------------- */
@media (min-width: 768px){
	
}

/* スマホ----------------------------- */
@media screen and (max-width: 767px){
	/*-----------------------------
 サイト共通
 -----------------------------*/
 .section_hamazaki{
  font-size: 1.4rem;
  margin: 2em auto 0 auto;
  padding: 1em;
 }
 
 /*****
 見出し系
 *****/
 .ttl_type01{
  display: block;
  font-size: 1.8rem;
  padding: 0;
  background-image: none;
 }
 .ttl_type01 .ttl_eng{
  display: block;
  border-bottom: solid 2px #e50012;
 }
 .ttl_type01 .ttl_jp{
  margin: 0.5em 0 0 0;
 }
 
 /*****
 リンクボタン
 *****/
 
 
 /*-----------------------------
 index
 -----------------------------*/
 /*****
 濱崎塾とは
 *****/
 .hama_about{
  display: block;
 }
 .hama_photo{
  width: 65%;
  margin: 0 auto 1em auto;
 }
 
 /*****
 コンテンツナビ
 *****/
 .nav_content{}
 .nav_content ul{
  flex-wrap: wrap;
  position: relative;
  padding: 0 0 4em 0;
 }
 .nav_content ul li{
  font-size: 1.4rem;
  width: 48%;
  margin: 0 0 1em 0;
 }
 /*アクティブ時*/
 .nav_content ul li.show_box_parent{
  width: 100%;
  position: absolute;
  bottom: 0;
 }
 
 .nav_content ul li a::after{
  top: -1px;
  left: -1px;
 }
 
 /***バックナンバーの表示エリア***/
 .menu_area{
  margin: 0 auto;
  padding: 1em;
 }
 
 /***タブのjsクラス***/
 /*タブのナビゲーションエリア*/
 .tab_nav{}
 
 /*表示中のタブ*/
 .show_box_parent{}
 .show_box{}

 /*内容表示エリア*/
 .tab_box{}
 
 /*初期表示の内容*/
 .tab_box_show{}
 /***end タブのjsクラス***/
 
 
 /*****
 バックナンバーリスト表示
 *****/
 .ttl_bkn{
  font-size: 1.6rem;
 }
 
 .bk_num_list{
  display: block;
 }
 .bk_num_list li{
  font-size: 1.6rem;
  width: 100%;
 }
 .bk_num_list li::before{
  font-size: 1.4rem;
 }
 
 /***カテゴリー***/
 /***下位カテゴリー***/
 
 
 /***ページネーション***/
 .page_nation li{
  margin: 0 0.5em;
 }
 
 /*****
 建築用語集
 *****/
 .nav_glossary{
  display: block;
 }
 .nav_glossary .img_glossary{
  width: 50%;
  margin: 0 auto;
 }
 
 /*****
 お知らせ
 *****/
}


/* print----------------------------- */
@media print{
	#footer,.page_top{ display: none; }
	body{ min-height: 0; }
}