@charset "utf-8";

/*Light*/
@font-face {
  font-family: 'Zen Maru Gothic';
  src: url('../font/Zen_Maru_Gothic/ZenMaruGothic-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
/*Regular*/
@font-face {
  font-family: 'Zen Maru Gothic';
  src: url('../font/Zen_Maru_Gothic/ZenMaruGothic-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
/*Medium*/
@font-face {
  font-family: 'Zen Maru Gothic';
  src: url('../font/Zen_Maru_Gothic/ZenMaruGothic-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

.fs-sm {font-size: clamp(0.8rem, 0.17vi + 0.76rem, 0.89rem);}
.fs-base{font-size: clamp(1rem, 0.34vi + 0.91rem, 1.19rem);}
.fs-md{font-size: clamp(1.25rem, 0.61vi + 1.1rem, 1.58rem);}
.fs-lg{font-size: clamp(1.56rem, 1vi + 1.31rem, 2.11rem);}
.fs-xl{font-size: clamp(1.95rem, 1.56vi + 1.56rem, 2.81rem);}
.fs-xxl{font-size: clamp(2.44rem, 2.38vi + 1.85rem, 3.75rem);}
.fs-xxxl{font-size: clamp(3.05rem, 3.54vi + 2.17rem, 5rem);}



/*全体の設定
---------------------------------------------------------------------------*/
html,body {
	margin: 0;padding: 0;
	height: 100%;
	font-size: 16px;
}

@media screen and (max-width:960px) {
	html, body {
		font-size: 14px;
	}
}
body {
	font-family: 'Zen Maru Gothic',"ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	-webkit-text-size-adjust: none;
    font-weight: 400;
    background:#fff;
	color: #4D4535;
	line-height:1.85;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%; 
	word-wrap: break-word;
}


*{box-sizing: border-box;}

/*opa1（透明から着色状態に）
---------------------------------------------------------------------------*/
@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}


/*トップページのスライドショー（vegasを使用）
---------------------------------------------------------------------------*/
#mainimg {
    width: 100vw;
    height: 100vh;
	position: fixed;z-index: -1;
	left: 0px;top: 0px;
}


/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: #4D4535;	/*文字色*/
	transition: 0.3s;
    text-decoration:none;
}

a:hover {
	color: #777;	/*マウスオン時の文字色*/
}


/*container（サイト全体）
---------------------------------------------------------------------------*/
#container {
	/*max-width: 1800px;*/
	width:100%;
	margin: 0 auto;
	height: 100%;
	display: flex;
	justify-content: space-between;
}
@media screen and (max-width:960px) {
	#container {display: inline;}
}

/*ヘッダーブロック*/
header {
	position: fixed;
	z-index: 100;
	left: 0px;
	top: 0px;
	height: 100%;
	/*background: linear-gradient(rgba(255,255,255,0.5) 750px, #f1cea8);*/
	background-color: #FBFCFD;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
	width: 250px;
	overflow: auto;	/*自動でスクロールバー*/
	direction: rtl;/*スクロールバーを左に*/
}
/* 内側の要素で左書きの言語に戻す */
header > div {
    direction: ltr;
}
/*ロゴ画像*/
header #logo {
	line-height: 0;margin: 0;
	/*background: linear-gradient(160deg, #FF6A00, #FFB144);*/
	padding: 40px 30px;/*上下、左右*/
}
@media screen and (max-width:960px) {
	header {
		width: 160px;
		background: none;
		box-shadow: none;
		height: auto;
		background-color: #FBFCFD;
	}
	header #logo {	padding: 10px 20px;	/*上下、左右*/	}
}
@media screen and (max-width:600px) {
}
/*
@media screen and (max-height:720px) {
	header #logo {padding: 10px 50px;}
}
*/



/*menubar
---------------------------------------------------------------------------*/

/*メニューのボックス全体の設定*/
#menubar {height: auto;overflow: visible;}
#menubar.db {position: static;overflow: visible;height: auto;padding: 0;}

#menubar #menubar_common {list-style: none;margin: 0;padding: 0;}

/*メニュー1個あたりの設定*/
#menubar #menubar_common a {
	display: block;text-decoration: none;
	padding: 10px 20px;	/*メニュー内の余白*/
	font-weight: 500;
	color: #4D4535;
}
/*--画面の高さが720px以下になった場合-------*/
/*
@media screen and (max-height:720px) {
	#menubar ul a {
		padding: 10px 20px;
	}
}
*/
/*マウスオン時*/
#menubar #menubar_common a:hover {
	background: #fff;	/*背景色*/
	/*box-shadow: 0px 0px 30px #f1cea8 inset;	ボックス内側に影*/
	background: rgb(233,127,18);
	background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,177,68,1) 85%, rgba(233,127,18,1) 100%);
	
	transition : 0.5s;
}

/*英語表記*/
#menubar #menubar_common span {
	display: block;
	font-size: 0.7em;/*0.7*/
	/*opacity: 0.5;	*/
	font-weight: 500;
	margin-top: -3px;
}
@media screen and (max-width:960px) {
	#menubar {height: 0px;overflow: hidden;}
	/*小さな端末用のメニューブロック*/
	#menubar.db {
		position: fixed;overflow: auto;z-index: 100;
		left: 0px;top: 0px;
		width: 100%;
		height: 100%;
		animation: opa1 1s both;
		padding: 50px 50px 90px 50px;	/* 上､右､下､左*/
		background: #fff;	/*背景色*/
	}
}
#menubar #menubar_common li:last-child {
  margin-bottom: 2em;
}
.list-hr {
	border-bottom: 1px solid #ccc;
	margin-bottom:1em;
	margin-top: 1em;
	margin-left:1em;
	margin-right:1em;
}
/*スクロールバー*/
header::-webkit-scrollbar {
    width: 10px;
}
header::-webkit-scrollbar-track {
    background-color: #FFE3CF;
    border-radius: 10px;
}
header::-webkit-scrollbar-thumb {
    background-image: linear-gradient(135deg, #FF6A00 10%, #E97F12 100%);
    border-radius: 0px;
}
/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*３本バーブロック*/
/*ハンバーガーメニューを非表示にする*/
#menubar_hdr {display: none;}

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

	#menubar_hdr {
		display: block;
		position: fixed;z-index: 100;
		top: 25px;		/*上からの配置場所指定*/
		right: 20px;	/*右からの配置場所指定*/
		width: 50px;	/*幅*/
		height: 50px;	/*高さ*/
		cursor: pointer;
		background: rgba(233,127,18,0.7) url(../img/ham.png) no-repeat center top/50px;/*背景色、ハンバーガメニュー画像の読み込み、50pxは幅の指定*/
		border-radius:5px;
	}
	/*×印が出ている状態の設定。*/
	#menubar_hdr.ham {
		background: #E97F12 url(../img/ham.png) no-repeat center bottom/50px;
	}
}

/*contentsブロック
---------------------------------------------------------------------------*/
#contents {
	height: 100%;
	margin-left: 250px;			/*左側メニューのスペース*/
	width: calc(100% - 250px);	/*幅。左側のブロック分を差し引く*/
	animation: opa1 2s both;	/*「2s」はcontentsを表示するまでの時間。*/
}
@media screen and (max-width:960px) {
	#contents {
		margin-left: 0px;	/*左側スペース*/
		width:auto;
	}
}
/*トップページのコンテンツ*/
.home #contents {
}

/*mainブロック設定
---------------------------------------------------------------------------*/
/*mainブロックの設定*/
main {
	position:relative;/*右上用*/
}
/*トップページのmainブロック*/
.home main {
	overflow: auto;
	height: 100%;
}
@media screen and (max-width:960px) {
	.home main {
		padding-top: 100px;/*上余白。ロゴなどに重ならないようにする為。*/
	}
}


/*右上
---------------------------------------------------------------------------*/
.header-utility, .header-utility_hb{
	position: absolute;
	z-index: 2;
	top:0;
	right:80px;
	background: rgba(233,127,18,0.8);
    display: flex;
    border-radius:0 0 10px 10px;
    list-style: none;
}
.header-utility li, .header-utility_hb li{
    position: relative;
}
.header-utility li:first-child::after,
.header-utility_hb li:first-child::after{
    content: '';
    position: absolute;
    right: 0;
    top: 20px;
    background:#fff;
    width:1px;
    height: 30px;
}
.header-utility li a,.header-utility_hb li a{
	display: block;
	padding: 20px 20px 20px 50px;
    transition: all 0.3s;
    font-weight: 400;
    color:#fff;
}
.header-utility li .pcnone, .header-utility_hb li .pcnone{
    display: none;
}
.header-utility li a:hover, .header-utility_hb li a:hover{
     opacity:0.5;
}
.header-utility li:first-child a,
.header-utility_hb li:first-child a{
     background:url("../img/mailform.png") no-repeat 20px center;
    background-size:20px 20px;
}
.header-utility li:last-child a,
.header-utility_hb li:last-child a{
     background:url("../img/tel.png") no-repeat 20px center;
    background-size:20px 20px;
}
.header-utility_hb {
	display:none;
}

@media screen and (max-width:960px) {
	.header-utility {
		display:none;
	}
	.header-utility_hb{
		display:flex;
		align-items: flex-start;
		/*position: fixed;*/
		position: static;
		z-index: 3;
		top:inherit;
		right:inherit;
	    /*bottom:0;*/
	    width: 100%;
	    border-radius: 0;
	}
	    
	.header-utility_hb li{
	    width:50%;
	    text-align: center;
	    } 
	.header-utility_hb li a{
	    padding: 15px 15px 15px 40px;
	    }
	.header-utility_hb li:first-child a,
	.header-utility_hb li:last-child a{
	    background-position:35px center;
	}
}

@media screen and (max-width:560px) {
	.header-utility_hb li:first-child a,
	.header-utility_hb li:last-child a{
	    background-position:20px center;
	}
	.header-utility_hb li .spnone{
	    display: none;
	}
	.header-utility_hb li .pcnone{
	    display: block;
	}
}


/*セクション
---------------------------------------------------------------------------*/
/*section全般の設定*/
section + section {
	padding-top: 30px;	/*sectionの間に空けるスペース*/
}
/*トップページ以外の*/

section:not(.home) {
	max-width: 1800px;
	margin: 0 auto;
	padding-left:50px;
	padding-right:50px;
}
@media screen and (max-width:960px) {
	section:not(.home) {
	padding-left:20px;
	padding-right:20px;
	}
}
/*トップページ キャッチコピー
---------------------------------------------------------------------------*/
.catchphrase {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;

}
.catchphrase_in {
	color:#4D4535;
	background-color:rgba(255,255,255,0.6);
	padding:30px 20px;
	border-radius:30px;
    font-weight: 400;
}



/*mainブロックのpタグ*/
main p {
	margin: 0 20px 30px;	/*上、左右、下へ空けるスペース*/
}




/*フッター設定
---------------------------------------------------------------------------*/

#footer_wrap {
	width: 100%;
	background-color:#E97F12;
}
footer {
	max-width: 1800px;
	margin: 0 auto;
	padding: 20px 50px;
	display: flex; 
	justify-content: space-between;
	color: #fff;
}
#f-add {
	flex-grow:1;
	line-height: 1.5em;
}
#f-add p:first-of-type {/*会社名*/
	font-weight: 500;
	margin-bottom:1em;
}
#f-add img{
	height: 80px;
	margin-bottom:1em;
}
.toformbtn a {
    background: #eee;
    border-radius: 9999px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top:1em;
    max-width: 200px;
    padding: 5px 15px;
    font-family: "Zen Maru Gothic";
    color: #333333;
    line-height: 1.8;
    text-decoration: none;
    transition: 0.3s ease-in-out;
    font-weight: 500;
    white-space: nowrap;
}
.toformbtn a:hover {
    background: #4D4535;
    color: #FFF;
}
.toformbtn a:after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 3px solid #E97F12;
    border-right: 3px solid #E97F12;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}
.toformbtn a:hover:after {
    border-color: #FFF;
}

#f-links_wrap{
	display: flex; 
	justify-content: flex-end;
}
#f-links {
	flex-grow:2;
	display: flex;
	flex-direction: column;

}
#f-site p:first-of-type, #footermenu p:first-of-type {/*クレジットカード～*/
	border-bottom: 1px solid #fff;
	margin-bottom:0.5em;
	text-align:center;
}
#f-site ul {list-style: none;margin: 0;padding: 0;}
#f-site ul li {
	/*display: inline-block;*/
	width: 250px;
	border: 1px solid #fff;
	background-color:#fff;
	margin-bottom:0.5em;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}
#f-site ul li a{display:block;padding:5px;margin:0;}
#f-site ul li img{height: 50px;}
#f-site ul li a:hover {
	opacity: 0.3;
	transition : 0.5s;
}
#footermenu {
	padding-right:3em;
}
#footermenu ul {
	list-style: none;margin: 0;padding: 0;
}
#footermenu li {
	padding: 0 10px;
	white-space: nowrap;
}
#footermenu li::before {
    content: '-';
    padding: 0 10px;
}
#footermenu li a,#copyright a{
	text-decoration: none;
	color: #fff;
}
#footermenu li a img {
    width: 1em;
    margin-left: 10px;
}
#footermenu li a:hover,#copyright a:hover {
	color: #aaa;
	transition : 0.5s;
}
#copyright {
	display: flex; 
	justify-content: flex-end;
	align-items: flex-end;
	padding-top: 30px;
	flex-grow:1;
}

@media screen and (max-width:1200px) {
	footer {padding: 20px 20px;	}
	#footermenu {padding-right:1em;	}
}
@media screen and (max-width:700px) {
	footer {flex-wrap: wrap;}
	.toformbtn a {margin-left: auto;margin-right:auto;}
	#f-links_wrap {justify-content: center;}
	#f-add {width: 100%;margin-bottom:2em;text-align:center;}
	#f-links {width: 100%;}
	#copyright {justify-content: center;}
}
@media screen and (max-width:550px) {
	#f-links_wrap {flex-wrap: wrap;}
	#footermenu {width: 100%;padding-right: 0em;margin-bottom:2em;}
	#footermenu ul{max-width: 200px;margin-right: auto;margin-left:auto;Overflow: hidden;}
	#f-site {width: 100%;text-align:center;}
}
@media screen and (max-width:300px) {
	#f-site ul li {width: 100%;}
}

/*===================================*/
/* ページトップ */
/*===================================*/

#page-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 14px;
  line-height: 1;
  z-index: 99;
}
#page-top a {
  background: #adadad;
  text-decoration: none;
  color: #fff;
  width: 50px;
    height: 50px;
    border: 1px solid #adadad;
	display: flex;
	justify-content: center;
    align-items: center;
  opacity: 0.8;
  transition: all .3s ease;
}
#page-top a:hover {
  text-decoration: none;
  opacity: .5;
}
#page-top span {
    display: inline-block;
    width: 13px;
    height: 13px;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    transform: rotate(45deg);
    margin: 8px 0 0 0;
}



/*テーブル
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
	font-weight: bold;			/*太字に*/
	background: #f19b4e;		/*背景色*/
	color: #fff;				/*文字色*/
	padding: 5px 15px;		/*上下、左右へのボックス内の余白*/
}

/*ta1テーブルブロック設定*/
.ta1 {
	border-top: 1px solid #ccc;	/*テーブルの一番上の線。幅、線種、色*/
	table-layout: fixed;
	width: 100%;
	margin: 0 auto 30px;		/*最後の「30px」がテーブルの下に空けるスペースです*/
	background: #fff;			/*背景色*/
}

/*tr（１行分）タグ設定*/
.ta1 tr {
	border-bottom: 1px solid #ccc;	/*テーブルの下線。幅、線種、色*/
}

/*th（左側）、td（右側）の共通設定*/
.ta1 th, .ta1 td {
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
	padding: 20px 15px;		/*上下、左右へのボックス内の余白*/
}

/*th（左側）のみの設定*/
.ta1 th {
	width: 20%;		/*幅*/
	text-align: left;	/*左よせにする*/
	background: #f7f7f7;	/*背景色*/
}

@media screen and (max-width:960px) {
	.ta1 caption {
		padding: 10px 5px;			/*上下、左右へのボックス内の余白。基本的に数行下の「.ta1 th, .ta1 td」のpaddingと揃えておけばOKです。*/
	}
	/*th（左側）、td（右側）の共通設定*/
	.ta1 th, .ta1 td {
		padding: 10px 5px;		/*上下、左右へのボックス内の余白*。基本的に数行上の「.ta1 caption」のpaddingと揃えておけばOKです。*/
	}
	/*th（左側）のみの設定*/
	.ta1 th {
		width: 30%;			/*幅*/
	}
}



/*よく頂くご質問
---------------------------------------------------------------------------*/
/*FAQボックス全体*/
.faq {
	padding: 0 5px;	/*上下、左右へのボックス内の余白*/
}

/*質問*/
.faq dt {
	border-radius: 10px;	/*枠を角丸にする指定*/
	margin-bottom: 20px;	/*下に空けるスペース*/
	background: linear-gradient(#fff,#eee);/*背景グラデーション*/
	box-shadow: 0px 0px 5px rgba(0,0,0,0.2);	/*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.2は色が20%出た状態の事。*/
	text-indent: -2em;				/*テキストのインデント。質問が複数行になった際に、テキストの冒頭を揃える為に設定しています。*/
	padding: 5px 1em 5px 3em;		/*ボックス内の余白。ここを変更する場合、上のtext-indentも調整します。*/
}

/*アイコン（Font Awesome）*/
.faq dt::before {
	font-family: "Font Awesome 5 Free";	/*Font Awesomeを使う指定*/
	content: "\f059";		/*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/
	padding-right: 1em;		/*アイコンとテキストの間の余白*/
	color: #f19b4e;			/*文字色*/
}

/*回答*/
.faq dd {
	padding: 5px 1em 30px 3em;		/*ボックス内の余白**/
}

/*opencloseを適用した要素のカーソル*/
.openclose {
	cursor: pointer;	/*カーソルの形状。リンクと同じスタイルにしてクリックできると認識してもらう。*/
}

.faq dt span {text-indent: 0;}




/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.color-theme, .color-theme a {color: #f19b4e !important;}
.color-check, .color-check a {color: #f00 !important;}
.c {text-align: center !important;}
.ws {width: 48%;display: inline;}
.wl {width: 95%;display: block;}
.mb30 {margin-bottom: 30px !important;}
.look {display: inline-block;border: 1px solid #ccc;padding: 5px 20px;background: rgba(0,0,0,0.03);border-radius: 5px;margin: 5px 0;}
.ofx {overflow-x: hidden;}


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

.ws {width: 95%;display: block;}

}