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

/* =============================================================================
   230121_2_PCは写真付きメガメニュー・スマホは2階層対応メニュー
   ========================================================================== */
/*
Zarigani Design Office Drawer Menu
Copyright 2018 Zarigani Design Office
Customized by minimalgreen

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/


.drawer_menu a {
	color: inherit;
	text-decoration: none;
}

.drawer_menu a:visited {
	color: inherit;
}


/* PC用ナビゲーション */

.drawer_menu .drawer_nav_wrapper {
	transform: translate(0);
	width: 100%;
	height: 50px;
	/* PC用メニュー高さ */
	position: relative;
	top: auto;
	right: auto;
	z-index: 100;
	background-color: #555;
	/* PC用メニュー背景色 */
}

.drawer_menu .drawer_nav {
	max-width: 1000px;
	/* コンテンツ幅に合わせる */
	padding: 0;
	margin: 0 auto;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	list-style-type: none;
}

.drawer_menu .drawer_nav li {
	font-size: 16px;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 50px;
	/* PC用メニュー高さ */
	line-height: 50px;
	/* PC用メニュー高さ */
	background-color: #555;
	/* PC用メニューボタン背景色 */
	text-align: center;
	list-style-type: none;
}

.drawer_menu .drawer_nav li:hover {
	background-color: #999;
	/* PC用メニューボタンマウスオーバー背景色 */
}

.drawer_menu .drawer_nav li a {
	color: #fff;
	/* PC用メニューボタン文字色 */
}





/*+++ Default Button Color +++*/

.drawer_menu .drawer_button {
	color: #fff;
	/* ハンバーガーメニュー文字色 */
	display: none;
}

.drawer_menu .drawer_button .drawer_bar {
	background-color: #000;
	/* ハンバーガーメニュー三本線の色 */
}




/*  ウィジェットタイトル */
.drawer-title {
	text-align: center;
	width: 100%;
	height: 50px;
	line-height: 50px;
	background-color: #555;
	/* ドロワーメニュー内タイトルライン背景色 */
	color: #fff;
}

/* フォローボタン */

.follow-buttons {
	text-align: center;
	margin-top: 0;
	width: 100%;
	margin-top:4%;/*追加*/
    margin-bottom:4%;/*追加*/
}

.follow-buttons a {
	display: inline-block;
	width: 60px;
	text-align: center;
	text-decoration: none;
	margin: 5px;
}

.follow-buttons .inner-text {
	font-size: 10px;
	display: block;
}

.follow-buttons .lg,
.content-inner-follow-buttons .fa {
	padding: 15px;
	border-radius: 5px;
	margin: 2px auto;
}

.follow-buttons .hatena {
	color: #38393C;
	background-color: transparent;
}

.follow-buttons .blogicon-hatenablog {
	background: #38393C;
	color: #ffffff;
}

.follow-buttons .blogicon-hatenablog:hover {
	background: #5F6063;
}

.follow-buttons .facebook {
	color: #305097;
	background-color: transparent;
}

.follow-buttons .blogicon-facebook {
	background: #305097;
	color: #ffffff;
}

.follow-buttons .blogicon-facebook:hover {
	background: #5A77B7;
}

.follow-buttons .twitter {
	color: #55acee;
	background-color: transparent;
}

.follow-buttons .blogicon-twitter {
	background: #55acee;
	color: #ffffff;
}

.follow-buttons .blogicon-twitter:hover {
	background: #89C7F7;
}

.follow-buttons .instagram {
	color: #D93177;
	background-color: transparent;
}

.follow-buttons .blogicon-instagram {
	background: #D93177;
	color: #ffffff;
}

.follow-buttons .blogicon-instagram:hover {
	background: #df528d;
}

.follow-buttons .feedly {
	color: #6cc655;
	background-color: transparent;
}

.follow-buttons .blogicon-rss {
	background: #6cc655;
	color: #ffffff;
}

.pc-hidden .profile-icon {
	float: none;
}











header div.logo figure {
    width: 184px;
    position: absolute;
    top: -36px;
    left: 13px;
    letter-spacing: 1px;
}

/*ロゴリンク*/
#header a.logo-link:hover{
	/*opacity: 0.8;ちらつくので切る*/
}

/*ロゴ横テキスト*/
#header .pc-header-wrapper .logoyoko{
    position: absolute;
    text-align: left;
    left: 89px;
    font-size: 12px;
    line-height: 1.6;
    /*top: 3px;*/
    font-weight: normal;
}









/* =============================================================================
   「8_8-1_ドロップダウンメニュー(写真付上ナビ)」- 自作css
   ========================================================================== */



/*............................................
	　　　　　①ナビゲーション全体の設定
.............................................*/
#header .pc-header-wrapper nav{
	color:#fff;/*グロナビの文字色*/
	text-align: center;/*グロナビ内の文字、中央揃え*/
	/*height: 70px;ここで高さを出してliの領域の高さとの差が生じると、2階層目が出るときにその差のときだけ非表示になりちかちかするのでここで高さを作らない*/
	display: flex;/*ロゴとリンクテキストを横並びに*/
	align-items: center;
	/*padding-top: 30px!important;*/
}

/*リンクテキスト間の余白*/
#header .pc-header-wrapper nav .total-nav > li{
	padding:17px 25px;/*【重要】headerの高さはここの余白取りによって作る*/
	padding: 17px 11px;
}

#header .pc-header-wrapper nav .total-nav > li:first-child{
    margin-left: 30px;
}


/*リンクテキスト間の余白
#header .pc-header-wrapper nav .total-nav > li:nth-of-type(1){
	margin-left: 159px;
}
*/


#header .pc-header-wrapper nav a{
	text-decoration: none;
}



/*#header .pc-header-wrapper .logoyoko span{

	color: #fd598c;
}*/




/*............................................
	　　②グロナビ(1階層目の指定もろもろ)の設定
.............................................*/

/*「グロナビの<a>/1階層目」、「プルダウンの<a>/2階層目」に分けてそれぞれ異なる自由度で
諸指定ができるように、前者にはclass="g-nav"を、後者にはclass="p-nav"を付与し、
(そのために直上に<div>を設けている)それぞれの<a>を個別の自由度で設定を施せるようにした。*/



/*ゆいコメ：グロナビ(1階層目)の<a>つまりテキストだけにフォントサイズを変えれるようにするために付与したClass。
プルダウンが無いテキストには、<li>の中に<div>を設け<a>を内包してclass付与、プルダウンがあるテキストには、
矢印の表示のために設けた<div>に、矢印の為のclassに加え、この為のclassを複数クラスで付与。
ここで、グロナビのテキストだけのフォント周りを指定できるようになった。*/
#header .pc-header-wrapper nav .g-nav_a-text a{
	font-size: 15px;
	font-weight:lighter;
	letter-spacing: 1px;
	/*padding: 20px 25px;/*ゆいコメ：ここで、グロナビ(1階層目のテキスト)だけの<a>間の余白を調整できるようになった。重要。*/
	
	/*padding-left: 25px;
	padding-right: 25px;*/
	color: #000;/*ゆいコメ：グロナビの文字の色、矢印の色*/
	/*ゆいコメ：<a>で内包したのはグロナビの各テキスト。そのテキストの上下左右の余白。つまりヘッダーそのものの中の文字外の余白ここで指定。*/
	display: block;/*ゆいコメ<a>をブロック要素に。*/
	transition:all .3s;
	/*ゆいコメ：relativeはリンクに必要なものというわけでなくあくまで矢印を表示するための矢印を表示する指定の前提の準備としての記述。矢印は、プルダウンがあるテキストだけ、そのテキストを内包する<a>にafter要素で表示させる。その基点にするために、ここで<li>の中の<a>に対してrelativeを指定しておく*/
	position: relative;
}

/*文字横のarrowの分だけ余白が詰まるので(疑似要素にはmarginでもpaddingでも余白設定できなかった)、後続するリンクテキストの左を詰めることで余白間をすべて統一されるように調節
#header .pc-header-wrapper nav .total-nav > li:nth-of-type(3){
	/*padding-left: 42px;
	padding-left: 0px;
}*/

/*リンクテキスト間の余白
#header .pc-header-wrapper nav .total-nav > li:first-of-type(4){
	padding-left: -20px;
}*/



/*ゆいコメ：グロナビのテキストだけのhover時の色*/
#header .pc-header-wrapper nav .g-nav_a-text a:hover{
	opacity: 0.4;
	/*color: #C42257;*/
	transition: all .1s;
}


/*ゆいコメ：プルダウンがあるテキスト「About」の横に付く(<li>)の矢印の設定
#header .pc-header-wrapper nav .g-nav_arrow1 a::after{
	content:'';
	position: absolute;
	/*left: 109px;矢印の横方向の位置
	top:26px;矢印の縦方向の位置
	width:7px;
	height:7px;
	border-top: 1.5px solid #fff;/*傾けたら右の線になる。矢印の線の太さを2pxから1pxに変更、線の色
    border-right:1.5px solid #fff;/*傾けたら左の線になる。矢印の線の太さを2pxから1pxに変更、線の色
    /*transform: rotate(135deg);
	ransform: translate(10px 10px);
	transform: translate(10px, 7px) rotate(134deg);/*位置と角度の一括指定
}
*/

/*ゆいコメ：プルダウンがあるテキスト「Service」の横に付く(<li>)の矢印の設定
#header .pc-header-wrapper nav .g-nav_arrow2 a::after{
	content:'';
	position: absolute;
	width:7px;
	height:7px;
	border-top: 1.5px solid #fff;/*傾けたら右の線になる。矢印の線の太さを2pxから1pxに変更、線の色
    border-right:1.5px solid #fff;/*傾けたら左の線になる。矢印の線の太さを2pxから1pxに変更、線の色
    /*transform: rotate(135deg);
	transform: translate(10px 10px)
	transform: translate(10px, 7px) rotate(134deg);/*位置と角度の一括指定
}
*/


 

/*ゆいコメ：基点決め。全てを内包する<ul>*/
#header .pc-header-wrapper nav ul.total-nav{
	/*2階層目の基点にするためrelativeを指定*/
	position: relative;
	list-style: none;
	display: flex;
	justify-content: center;
	justify-content: flex-end;
	width: 100%;/*hover内のメニューを幅を指定*/
	/*padding-left: 32%;横並べにした「アイテム」の中の中央になっているので、「コンテナ」にとっての中央になるように余白を左に詰める。【重要】maginだと、2階層目ごと左に動くので注意！*/
	/*margin-left: -172px;*/
	padding-top: -10px;
	/*margin-top: -9px;*/
	align-items: center;
	padding-top: 8px;
}








/*....................................................
	　　　 ③プルダウン(2階層目の指定もろもろ)の設定
......................................................*/
/*2階層目以降は横並びにしない*/
#header .pc-header-wrapper nav  ul ul{
  display: block;
}

/*メガメニュー*/
/*2階層目を横並びに(子ページが1つだけver).*/
#header .pc-header-wrapper nav .p-nav{
	/*2階層目の背景含めた縦方向スタート位置*/	
	position: absolute;
    left:0;/*場合によっては肉眼で調整*/
    top: 78px;/*肉眼で調整*/
    width: 100%;
    max-width: 1920px;/*2階層目の幅*/
	background: #2d2d2d;/*2階層目の背景の色*/
    display: flex;/*子要素を横並びに*/
	justify-content: center;
    visibility: hidden;/*はじめは非表示*/
    opacity: 0;
    transition: all .3s;/*アニメーション設定*/
    align-items: center;
	height: 316px;/*メガメニューエリア全体の高さ*/
}

/*メガメニュー　li全部の高さを統一*/
#header .pc-header-wrapper nav ul.p-nav li{
	height: 316px;/*メガメニューエリア全体の高さ*/
    margin-top: 112px;
}

/*メガメニュー　hover*/
#header .pc-header-wrapper nav ul.p-nav li a:hover{
	opacity: 0.5;
}
    

/*メガメニュー 見出しタイトル(横並べ1つ目)の幅*/
#header .pc-header-wrapper nav ul.p-nav li:first-child{
	/*width: 14%;*/
	position: relative;
	width: 229px;
}

/*メガメニュー　h2*/
#header .pc-header-wrapper nav ul.p-nav li:first-child h2{
	text-align: left;
    display: block;
    /*margin-top: 66px;*/
    font-weight: bold;
    letter-spacing: 3px;
    font-size: 32px;
	position: absolute;/*位置調整*/
    top: 79px;
}

/*メガメニュー Works(小さい文字)を表示*/
#header .pc-header-wrapper nav ul.p-nav li:first-child::before{
	content: "Service";
    display: block;
    color: #ffffff85;
    font-size: 15px;
    letter-spacing: 3px;
    /*transform: translate(-100px, 67px);*/
	position: absolute;
	top: 60px;
    left: 0px;
}

/*メガメニュー 区切線*/
#header .pc-header-wrapper nav ul.p-nav li:first-child .kugiri_megamenu{
content: "";
    display: inline-block;
    background-image: linear-gradient(to bottom, #fff 6px, transparent 6px), linear-gradient(to bottom, #fff 6px, transparent 6px);
    background-size: 1px 12px;
    background-repeat: repeat-y;
    background-position: left top, right top;
    width: 2px;
    height: 212px;
    position: absolute;
    /* transform: translate(41px, -124px); */
    top: -4px;
    /*left: 129px;*/
    margin-left: 34px;
	left: 149px;
}

/*メガメニュー 画像下の文字*/
#header .pc-header-wrapper nav ul.p-nav li:not(:first-child) p{
   font-size: 15px;
    text-align: justify;
    /*width: 212px;*/
    line-height: 1.5;
    margin-top: 12px;
}



/*メガメニュー　1個目のリンクテキスト*/
#header .pc-header-wrapper nav ul.p-nav li:nth-of-type(2){
	/*margin-left: -27px;*/
}
    

/*メガメニュー*/
#header .pc-header-wrapper nav ul.p-nav li:not(:first-child){
    /*width: 13%;*/
	/*width: 272px;*/
	width: 258px;
    margin-right: 37px;
}




/*hoverしたら表示*/
#header .pc-header-wrapper nav li.has-child:hover .p-nav{
  visibility: visible;
  opacity: 1;
}





/*2階層目を横並びに(複数の子ページがあるver)....*/
#header .pc-header-wrapper nav .ver2{
	column-gap: 20px;
}

#header .pc-header-wrapper nav .p-nav a{
	letter-spacing: 1.2px;	
    /*padding:20%;*/
}

#header .pc-header-wrapper nav .p-nav a:hover{
	color:#FFCEDB;	
}

/*2階層目の一番最後の子要素に*/
#header .pc-header-wrapper nav .p-nav .ver2 li:last-child{
	padding-right: 10px;
}
/*2階層目の一番最初の子要素に*/
#header .pc-header-wrapper nav .p-nav .ver2 li:first-child{
	padding-left: 10px;
}

/*各ナビゲーション横幅*/
#header .pc-header-wrapper nav .p-nav li{
  /*width:18.5%;
	ここで、余白込みで肉眼で確認しながら設定
 1920pxで見たときの絶対値もmax-widthで入れとく方がいい。*/
}

/*文字を中央揃えに*/
#header .pc-header-wrapper nav .p-navdd{
	margin: 0 auto;
}


/*hoverしたら画像拡大
#header .pc-header-wrapper nav .has-child img:hover{
	transform: scale(1.2);
}*/

/*ゆいコメ：画像<dt>の下に余白*/
#header .pc-header-wrapper nav .has-child dt{
	overflow: hidden;
	/*height: 20vh;*/
	/*margin-bottom: 12px;*/
}

/*==2階層目以降の画像設定
#header .pc-header-wrapper nav .has-child img{
	max-width: 100%;
	height: auto;
	transition: all .5s;
	vertical-align: bottom;
}


/*ナビゲーションaタグの形状*/
#header .pc-header-wrapper nav li.has-child ul li a{
	color: #fff;
}

/*
#header .pc-header-wrapper {
	position: fixed;
	z-index: 10000;
}*/


#header .pc-header-wrapper nav .logo{
	position: relative;
	z-index: 1001;
    top: 20px;
}

/*ロゴ
#header .logo-link img{
	position: relative;
	z-index: 10000;
	margin-left: 10%;
}*/


/*ロゴ
#header .logo-link h1 svg{
	/*color: crimson;colorでは変わらない
	fill: #fff;/*色はfillで指定
	/*width: 100%;
	height: 100%;
	position: relative;
	z-index: 10000;
	margin-left: 10%;
}*/



/*
#header .pc-header-wrapper nav .p-nav li:nth-of-type(2) img{
	width: 50%;
}
*/

#header{
	position: fixed!important;
	/*width: 100%;*/
	z-index: 10000!important;
	margin-top: -26px;
	background: #fff;/*グロナビの背景色*/
    height: 78px;
}



robots.txt .has-child .p-nav{
	opacity:1;
}

/*未公開の下層ページのリンクをオフで表示はしとく*/
#header .link-off{
	opacity: 0.4;
}


/*お問合せコンバージョン
#header .pc-header-wrapper .header-inquiry {
    position: absolute;
   /*right: 143px;
    width: 151px;
    top: 5px;
	right: 118px;
    width: 126px;
    top: 8px;
}*/

/*公式LINEコンバージョン*/
#header .pc-header-wrapper .header-line:hover,
#header .pc-header-wrapper .header-inquiry:hover{
	opacity: 0.5;
}


#header .rub{
font-size: 14px;
    letter-spacing: 1px;
    color: #fff;
    font-weight: normal;
    transform: translate(9px, -23px);
	
}



/*------------------
 　電話番号　
  ------------------*/
/*電話番号　位置*/
#header li.header_phone{
	/*position: absolute;
    top: 13px;
    right: 127px;*/
} 

/*電話番号*/
#header li.header_phone{
    color: #000;
    letter-spacing: 1px;
    font-size: 18px;
    font-weight: lighter;
    font-family: "Oswald", sans-serif;
}

/*電話番号　アイコン表示*/
#header li.header_phone p:before{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	color: #000;
	content: "\f095";
}


/*------------------
 　お問合せボタン　リンク
  ------------------*/
/*お問合せボタン　位置*/
#header li.header_contact{
/*	position: absolute;
    top: 13px;
    right: 127px;*/
} 

/*お問合せボタン　ボタンデザイン*/
#header li.header_contact a {
    color: #fff;
    letter-spacing: 2px;
    font-size: 15px;
    border: 2px solid #2a2a2a;
    padding: 10px 30px;
    font-weight: normal;
    border-radius: 23px;
	background-color: #2a2a2a;
    /*transition: .3s cubic-bezier(0.5, 1, 0.89, 1);*/
}

/*お問合せボタン　ボタンデザイン　hover*/
#header li.header_contact a:hover {
    background: #fff;
    color: #2a2a2a;
    transition: 0.5s;
    opacity: 1;
    border: none;
	border: 2px solid #2a2a2a;
    font-weight: bold;
}


/*------------------
 　セミナーリンク
  ------------------*/
/*セミナー　リンク*/
#header .pc-header-wrapper .header_seminar {
    position: absolute;
	width: 126px;
    top: 0px;
	right: 2px;
}
/*セミナー　リンク hover*/
#header .pc-header-wrapper .header_seminar a:hover{
    opacity:0.5;
}




/* //全体ここまで */
/* =================================================================================

スマホ(768px以上からPCコーディング)
961 

==================================================================================== */
@media only screen and (max-width: 767px){	

.pc{display: none;}
.sp{display: block;}

	
nav.drawer_nav_wrapper .pc-hidden .center{
	width: 100%;
}
	
nav ul{
	display: block;
}

nav li.has-child ul{
	position: relative;
	left:0;
	top:0;
	width:100%;
	visibility:visible;/*JSで制御するため一旦表示*/
	opacity:1;/*JSで制御するため一旦表示*/
	display: none;/*JSのslidetoggleで表示させるため非表示に*/
	transition:none;/*JSで制御するためCSSのアニメーションを切る*/
}
    
nav li.has-child ul li{
	width:100%;
	text-align: left;
}
	
nav li.has-child ul li dl{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
nav li.has-child ul li dt{
	width:30%;
	height: auto;
	margin: 0;
}

nav li.has-child ul li dd{
	width:64%;			
}

/*
nav ul li a{
	padding: 10px 20px;
	border-bottom:1px solid #ccc;
}*/
    
nav ul li li a{
		padding: 0;
}
	
/*矢印の位置と向き*/
nav ul li.has-child > a::before{
	top:17px;
	left:20px;
    transform: rotate(135deg);
}
    
nav ul li.has-child.active > a::before{
    transform: rotate(-45deg);
}
	
/*231117_ロゴにリンクが効かないのでいちばん階層上に変更*/
#header .sp-header-wrapper figure{
	position: relative;
	z-index: 10000;
	top: -5px;
    left: 3%;
}	
	
/*ロゴ横の文字*/
#header .sp-header-wrapper .logoyoko{
    position: absolute;
    color: #fff;
    font-size: 13px;
    text-align: left;
    left: 79px;
    font-weight: normal;
    line-height: 1.4;
    top: 18px;
}	
	
/*#header .sp-header-wrapper .logoyoko span {
    color: #fd598c;
}*/
	
/*ハンバーガーメニューの背景色(正方形)　※横並びさせず独立して存在*/
.drawer_menu .drawer_bg {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 999;
	background-color: rgba(51, 51, 51, 0.5);
	display: none;
	top: 0;
	left: 0;
}	
	

/*スマホメニューのヘッダだけを内包 ロゴ*/	
#header .logo-link img {
	width: 82%;
	margin-left: 2%;
    margin-left: 6px;
	margin-left: -23px;
}
	
	

	
	
/*ロゴの位置調整*/
#header ul.sp-header li:first-child{
	margin-top: 3.2%;	
}

/*ロゴ上のルビ*/
#header .sp-header .rub{
	font-size: 13px;
    letter-spacing: 1px;
    color: #fff;
    margin-bottom: -9px;
    transform: translate(-24px, -3px);
}	

	
	
	
	
/*スマホメニューのヘッダだけを内包 ロゴとハンバーガーアイコンを横並びに*/
.sp-header{
    display: flex;
    justify-content: space-between;
    /*height: 54px;【重要】固定するスマホヘッダーの高さをここで調節できるようにした
	height: 67px;*/
	height: 58px;
    align-items: center;
	background-color: #fff;/*ロゴだけが固定されスクロールするとロゴだけが上に残った色べたごと固定したい←【改善】ロゴとハンバーガーアイコン含めたヘッダーのセットを固定する。まずこのヘッダー全体を内包するdivに色べたをつける*/
	position: fixed;/*ロゴだけが固定されスクロールするとロゴだけが上に残った色べたごと固定したい←【改善】ロゴとハンバーガーアイコン含めたヘッダーのセットを固定する。そして固定*/
    width: 100%;/*ロゴだけが固定されスクロールするとロゴだけが上に残った色べたごと固定したい←【改善】*/
	z-index: 1003;/*ロゴだけが固定されスクロールするとロゴだけが上に残った色べたごと固定したい←【改善】*/
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);/*シャドウを追加*/
}
	
/*スマホのメニュー全体を内包　ハンバーガーアイコンの全体を内包(この中に描画が続く)*/
.drawer_menu .drawer_button {
	display: block;
	background-color: #fff;
	color: #000;/*線の色*/
	border: none;
	padding: 5px;
	width: 50px;
	letter-spacing: 0.1em;
	cursor: pointer;
	position: fixed;/*固定*/
	text-align: center;
	outline: none;
	/*top: -1px;アイコンの位置*/
	/*top: 6px;*/
	top: 2px;
    right: 4px;/*アイコンの位置*/
}
	
/*.sp-header {
    opacity: 0.8;
}*/
	
	
	
/*-------------------アクティブの時のハンバーガーアイコン---------------------*/
	
/*【アクティブの時】ハンバーガーアイコンを描画　各線*/
.drawer_menu .drawer_button.active .drawer_bar {
	/*width: 40px;*/
	width:30px;
}
	
/*【アクティブの時】ハンバーガーアイコンを描画　線①*/
.drawer_menu .drawer_button.active .drawer_bar1 {
	/*transform: rotate(30deg);*/
	transform: rotate(45deg);
}
/*【アクティブの時】ハンバーガーアイコンを描画　線②*/
.drawer_menu .drawer_button.active .drawer_bar2 {
	opacity: 0;
}

/*【アクティブの時】ハンバーガーアイコンを描画　線③*/
.drawer_menu .drawer_button.active .drawer_bar3 {
	/*transform: rotate(-30deg);*/
	transform:rotate(315deg);
}
	
/*【アクティブの時】　ハンバーガーアイコン　ハンバーガーアイコンの下に「menu」とか入れる場合のテキスト*/
.drawer_menu .drawer_button.active .drawer_menu_text {
	display: none;
}

/*【アクティブの時】　ハンバーガーアイコン　アクティブ　クローズ*/
.drawer_menu .drawer_button.active .drawer_close {
	display: block;
}	
/*--------------//アクティブの時のハンバーガーアイコン(ここまで)----------------*/
	
	
	
/*SPハンバーガーメニューの中　全体を内包*/
.drawer_menu .drawer_nav_wrapper {
	/*width: 250px;*/
	width: 100%;
	height: 100%;　
	transition: all 0.2s;
	transform: translate(2100%);
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1000;
	background-color: #FFF;
	/* ドロワーメニュー内背景色 */
	overflow-x: hidden;
	overflow-y: auto;
}
	
/*子ページの要素の上下の余白調節*/
.drawer_menu .drawer_nav li {
	background-color: #fff;
	height: auto;
	line-height: 40px;
	/*  ドロワーメニューリスト項目高さ */
	position: relative;
	/*border-bottom: 1px solid #eee;*/
}
	
/*-------------------ヘッダーの下　メニューのリンクテキストの領域に色べたを付ける---------------------*/	
.drawer_menu .drawer_nav_wrapper .drawer_nav li{
   background-color: #1C1C1C;/* メニューリストの領域に色べた */
   color: #fff;/* メニューリスト文字色 */
   display: block;
   text-align: left;
}
	
.drawer_menu .drawer_nav_wrapper .drawer_nav > li{
   padding-left: 20px;
   font-weight: normal;
}
	
.drawer_menu .drawer_nav > li:first-child{
   border-top: 1px solid #fff;
    padding-top: 39px;
}
.drawer_menu .drawer_nav > li:last-child{
	padding-bottom: 23px;/*メニューテキストの領域の一番下に余白*/	
}
/*-------------------//ヘッダーの下　メニューのリンクテキストの領域に色べたを付ける(ここまで)---------------------*/	
	
	

/*ハンバーガーアイコンを描画　各線*/
.drawer_menu .drawer_bar {
	display: block;
	height: 2px;
	margin: 8px 2px;
	transition: all 0.2s;
	transform-origin: 0 0;
}

.drawer_menu .drawer_close {
	letter-spacing: 0.08em;
	display: none;
}
/*ハンバーガーアイコンの下に「menu」とか入れる場合のテキスト
.drawer_menu .drawer_menu_text {
	display: block;
	text-align: center;
	font-size: 10px;
}*/

	
/*追加*/
	.drawer_menu .drawer_nav_wrapper ul li a{
    border-bottom: 0px;/*区切り線を消す*/
	display: inline-block;
	width: 95%;
}

.drawer_menu .drawer_nav {
	display: block;
	position: relative;
	margin-top: 40px;
}

	
	
/*メニューのulだけの領域*/
 .drawer_menu .drawer_nav {
	display: block;
    position: relative;
	/*margin-top: 40px;　【下記のように変更】もし白べたのメニューにするのであれば「background-color: #fff;」にして「margin-top: -9px;とpadding-top: 42px」は消す)*/
	/*メニュー(ul)だけを色付けたければ下記のようにする*/
    /*margin-top: 67px;/*ulの領域だけの背景色べたをつけたいので上の余白分をてっぺんまで詰める*/
    /*padding-top: 42px;背景色べただけはてっぺんにつけたまま、ulの中身だけ下に下げる*/
	border-top: 1px solid #fff;
    background-color: #1C1C1C;/*ハンバーガーアイコンの左側領域が白になるので、全体を色つける*/
 }
	
	


/*
.drawer_menu .drawer_nav li a {
	background-color: #fff;
	/* ドロワーメニューリスト背景色
	color: #555;
	/* ドロワーメニューリスト文字色
	display: block;
	text-align: left;
	padding-left: 20px;
}
*/
	
	

	
	

/* スマートフォン2階層目 */
.drawer_menu .drawer_nav li:hover ul.second-level {
	display: block;
}

.drawer_menu .drawer_nav li ul.second-level {
	display: none;
	position: relative;
	padding: 0;
	z-index: 1001;
}
	
.drawer_menu .drawer_nav li ul.second-level li:before{
	content: "";
 	display: inline-block;
	background-color: #fff;
	height: 1px;
	width: 11px;
	transform: translate(32px, -6px);
}
	

.drawer_menu .drawer_nav li ul.second-level li a {
	padding-left: 40px;
}

.drawer_menu .drawer_nav_wrapper.open {
	transform: translate(0);
}

.drawer_menu.left .drawer_button {
	right: auto;
	left: 32px;
}

.drawer_menu.left .drawer_nav_wrapper {
	/*transform: translate(-250px);*/
	transform: translate(-100%);
	right: auto;
	left: 0;
}

.drawer_menu.left .drawer_nav_wrapper.open {
	transform: translate(0);
}

.pc-hidden {
	text-align: center;
	        margin: 0 auto;
        width: 95%;
}

.touch-btn {
	color: #555;
	position: absolute;
	right: 2%;
	display: block;
	z-index: 10;
	width: 50px;
	height: 50px;
	text-align: center;
	vertical-align: middle;
}


	
	
	
/*追加(SNSアイコン周りの微調整)*/
	.fa-brands, .fab {
    font-family: "Font Awesome 6 Brands";
    font-weight: 400;
    font-size: 30px;
   /*color: #fff;*/ 
}

/*追加(2階層目があるテキスト横の下矢印のアイコン周りの微調整)*/
.fa-solid, .fas {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #fff;
}
	
	
	

/*ロゴ*/
#header .logo-link figure svg{
	width: 95%;/*サイズを微調整*/
	/*margin-top: 4px;位置を微調整*/
	height:auto;/*【重要】これが無いと、スマホ実機で見た時にロゴの左側に謎の余白ができる*/
	margin-left: 10%;
	max-width: 135px;
}

	
	
	
	
	
/*フリースペース/コンバージョンボタンエリア*/	
.sp-btn-contentsbox{
    width: 100%;
    margin: 0 auto;
    text-align: center;
    margin-top: 3%;
    display: flex;
    justify-content: center;
    column-gap: 10px;
}	
	
	

/*ボタン①(お問い合わせ)---色べた塗りつぶし*/
.sp-btn-contentsbox li:nth-of-type(1){
	width: 100%;
	display: block;
    margin: 0 auto;
	padding: 16px 0;
    font-size: 16px;
    border-radius: 82px;
    border-width: 5px;
	color: #fff;
	background-color: #9C8754;
	border:none;
    font-weight: normal;
    letter-spacing: 1px;
	padding-top: 15px
	}
	
/*ボタン②(電話をかける)---白抜きアウトライン*/
.sp-btn-contentsbox li:nth-of-type(2){
    width: 100%;
	display: block;
    margin: 0 auto;
    padding: 10px 10px;
    font-size: 14px;
    border-radius: 82px;
    border-width: 5px;
	color: #333;
	background-color: #fff;
	border: 2px solid #333;
    letter-spacing: 1px;
	padding-top: 15px
	}
	
	
	

.sp-btn-contentsbox li:nth-of-type(2)::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f095";
}
	
	
/*フリースペース/バナーエリア*/	
.banner-contentsbox{
	display: none;/*作り替えたらonにする*/
	margin: 0 auto;
	margin-top: -5%;
}
	
.banner-contentsbox ul li{
	display: block;
}

.banner-contentsbox img{
	display: block;
	margin: 0 auto;
	/*width: 95%;*/
	width: 100%;
}
	
/*1つ目のバナーだけの上余白*/
.banner-contentsbox li:first-child {
  margin-top:8%;
}	

/*1つ目のバナー以外の上余白*/
.banner-contentsbox li:not(:first-child) {
  margin-top: 3%;
}
		
	
.banner-contentsbox nav ul li a {
    padding: 0px;
    border-bottom: 0px;
}
	
	
/*フリースペース/プラポリ・サイトマップのリンクエリア*/	
.link_contentsbox{
color: #333;
    font-size: 14px;
    display: flex;
    justify-content: center;
    margin-top: 4%;
}
.link_contentsbox li{
	padding: 0 10px;
}
	
	
.link_contentsbox li:not(:last-of-type) {
    border-right: 1px solid #333;
}
	
	
	
#header .sp-header-wrapper	.header-line{
    width: 100%;
	margin: 0 auto;
    margin-top: 3%;
}
/*未公開の下層ページのリンクをオフで表示はしとく*/
#header .link-off{
	opacity: 1;
	color: #666;
}
	
.drawer_menu .drawer_nav ul li::first-letter{
	position: relative;
}	
	
.drawer_menu .drawer_nav li i{
	position: absolute;
	right: 6%;
    top: 41px;
}
	
	
	
#header{
	background:none;
    height: 67px;
}
	
	
/*スマホのメニュー全体を内包　ハンバーガーメニュー3本線
.drawer_menu .drawer_button {
    right: 0%;/*タブレットだけ位置を微調整
}*/
	
#header ul.sp-header li:first-child {
    /*margin-top: 1.5%;*/
	margin-top: 15px;
}	

.drawer_menu .drawer_nav li i {
	position: absolute;
	right: 6%;
    top: 9px;
	z-index: 999;
	display: block;
}
	
.fa-angle-down:before {
    display: block;
    width: 100%;
}
	
}
/* //スマホコーディング(ここまで) */
/* =================================================================================

タブレットだけ
     
==================================================================================== 
@media screen and (min-width:768px)and (max-width:960px){
/*スマホのメニュー全体を内包　ハンバーガーメニュー3本線
.drawer_menu .drawer_button {
    right: 6%;/*タブレットだけ位置を微調整
}
	
/*ロゴの位置調整
#header ul.sp-header li:first-child {
    margin-top: 0.9%;
}
	
/*ハンバーガーメニューの位置調整
.drawer_menu .drawer_button {
    right: 1%;
    top: 5px;
}

}*/

/* =================================================================================

スマホだけ  ←※251212：タブレットpcコーディングに変更のタイミングで削除

====================================================================================
@media screen and (min-width:375px)and (max-width:428px){
	
/*スマホのメニュー全体を内包　ハンバーガーメニュー3本線
.drawer_menu .drawer_button {
    right: 0%;/*タブレットだけ位置を微調整
}
	
#header ul.sp-header li:first-child {
    margin-top: 1.5%;
}	
}*/


/* =================================================================================

PCコーディングだけ
     
==================================================================================== */
@media screen and (min-width:768px){
.sp{display: none;}
.pc{display: block;}

	.pc-hidden {
		display: none;
		text-align: center;
	}

	/* ドロップダウンメニュー2階層目 */
	.drawer_menu .drawer_nav li ul.second-level {
		visibility: hidden;
		list-style-type: none;
		position: absolute;
		z-index: -1;
		top: 0;
		margin: 0;
		padding-left: 0;
	}

	.drawer_menu .drawer_nav li:hover ul.second-level {
		visibility: visible;
		z-index: 1;
		top: 50px;
		/* PC用メニューの高さに合わせる */
		transition: all .3s;
	}

	.drawer_menu .drawer_nav li:hover ul.second-level li {
		width: 200px;
		/* ドロップダウンメニューボタン横幅 */
		height: 50px;
		/* Pドロップダウンメニューボタン高さ */
		text-align: center;
	}

	.drawer_menu .drawer_nav li:hover ul.second-level li a {
		display: block;
		background-color: #555;
		/* ドロップダウンメニューの文字の背景色 */
		color: #fff;
		/* ドロップダウンメニューの文字色 */
		font-size: 100%;
		text-decoration: none;
		line-height: 50px;
		/* Pドロップダウンメニューボタン高さ */
		text-align: center;
	}

	.drawer_menu .drawer_nav li:hover ul.second-level li a:hover {
		background-color: #999;
		/* ドロップダウンメニューマウスホバー背景色 */
	}

	.touch-btn {
		color: #fff;
		margin-left: 5px;
	}
	
	#header{
	width: 100%;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);/*シャドウを追加*/
}


}
/* =================================================================================

タブレット以上/モニター(普通)以下  ←※251212：タブレットpcコーディングに変更のタイミングで削除

==================================================================================== 
@media screen and (min-width:600px)and (max-width:1200px){

	.pc-hidden {
		display: none;
		text-align: center;
	}

	/* ドロップダウンメニュー2階層目 
	.drawer_menu .drawer_nav li ul.second-level {
		visibility: hidden;
		list-style-type: none;
		position: absolute;
		z-index: -1;
		top: 0;
		margin: 0;
		padding-left: 0;
	}

	.drawer_menu .drawer_nav li:hover ul.second-level {
		visibility: visible;
		z-index: 1;
		top: 50px;
		/* PC用メニューの高さに合わせる 
		transition: all .3s;
	}

	.drawer_menu .drawer_nav li:hover ul.second-level li {
		width: 200px;
		/* ドロップダウンメニューボタン横幅
		height: 50px;
		/* Pドロップダウンメニューボタン高さ 
		text-align: center;
	}

	.drawer_menu .drawer_nav li:hover ul.second-level li a {
		display: block;
		background-color: #555;
		/* ドロップダウンメニューの文字の背景色 
		color: #fff;
		/* ドロップダウンメニューの文字色
		font-size: 100%;
		text-decoration: none;
		line-height: 50px;
		/* Pドロップダウンメニューボタン高さ 
		text-align: center;
	}

	.drawer_menu .drawer_nav li:hover ul.second-level li a:hover {
		background-color: #999;
		/* ドロップダウンメニューマウスホバー背景色 
	}

	.touch-btn {
		color: #fff;
		margin-left: 5px;
	}
	
	
	
	
	
	
/*基点決め。全てを内包する<ul>
#header .pc-header-wrapper nav ul.total-nav{
    padding-left: 0;
    margin-left: 0; 
    margin-top: 0;
}
	
#header .pc-header-wrapper .header_seminar {
	width: 81px;
    right: 9px;
}
	
#header .pc-header-wrapper nav .total-nav > li {
    padding: 15px 5px;
 }
	
#header .pc-header-wrapper nav .g-nav_a-text a {
    font-size: 14.5px;
    letter-spacing: 0px;
}
	
#header .pc-header-wrapper nav .total-nav > li:nth-of-type(1) {
	margin-left: 169px;
}
	
#header li.header_contact a {
    letter-spacing: 0px;
    font-size: 13px;
    padding: 12px 19px;
}

#header li.header_phone {
    letter-spacing: 1px;
    font-size: 15px;
    margin-left: 1%;
}
	
	
	
}*/
/* =================================================================================

タブレット以上/モニター(普通)以下  

==================================================================================== */
@media screen and (min-width:600px)and (max-width:1200px){
	#header .pc-header-wrapper nav ul.p-nav li:first-child h2 {
    letter-spacing: 2px;
    font-size: 29px;
}
	
#header .pc-header-wrapper nav ul.p-nav li:first-child {
    left: 30px;
}	
	
#header .pc-header-wrapper nav ul.p-nav li:first-child .kugiri_megamenu {
    left: 117px;
    height: 178px;
}	
	
#header .pc-header-wrapper nav .p-nav {
    height: 230px;
}
	
#header .pc-header-wrapper nav ul.p-nav li {
    margin-top: 148px;
}
	

	
}
/*....................................................
	　　　 ③プルダウン(2階層目の指定もろもろ)の設定
......................................................*/


/* =================================================================================

イレギュラー：タブレットのヘッダー：リンク間余白調整 

==================================================================================== */

@media screen and (min-width:600px)and (max-width:1000px){
#header .pc-header-wrapper nav .total-nav > li {
    padding: 17px 7px;
}

/* =================================================================================

モニター(wide)だけ

==================================================================================== */
@media screen and (min-width:1500px){


}