@charset "UTF-8";

/* ポートフォリオ　－　下層ページ PC */

/*****************************
全ページ共通
*****************************/
* {
	caret-color: transparent; /* カーソル位置をチカチカさせない */
	box-sizing: border-box;
	/* outline: 2px solid pink; */
}

body {
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	background: #FFFFFF;
	color: #0B1F32;
	font-size: 1rem;
	letter-spacing: 0;
	line-height: 180%;
}

img {
	max-width: 100%;
}

/* aタグ */
a {
	color: #164b09;
	text-decoration: none;

	/* 色と透明度の変化に対するTransitionを指定 */
 	transition: background-color 0.3s, opacity 0.3s;
	/* 初期透明度を設定 */
	opacity: 1;
}
a:hover {
    opacity: 0.6;
}

/* flex */
.flex {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}

/* アコーディオンメニューのポインター設定 */
details:hover summary {
	cursor: pointer;
}

/* aタグのリンク無効 */
.no_link {
	pointer-events: none;
}

/* 下層ページの main タグの上余白（トップページは異なる） */
.main {
	margin-top: 20px;
}

/* Window 幅 */
.wrapper {
    max-width: 1200px;
	padding: 0 20px;
	margin: 0 auto;
}


/*************************************
マージン設定
*************************************/
/* 上余白 */
.mt_120 {
	margin-top: 120px;
}
.mt_80 {
	margin-top: 80px;
}
.mt_40 {
	margin-top: 40px;
}

/* 下余白 */
.mb_60 {
	margin-bottom: 60px;
}



/*************************************
pc と sp の切り替え hidden
*************************************/
.hidden {
	display: none;
}

.hidden_pc {
	display: none;
}
@media screen and (max-width: 767px) {
	.hidden_pc {
		display: block;
	}
}
.hidden_sp {
	display: block;
}
@media screen and (max-width: 767px) {
	.hidden_sp {
		display: none;
	}
}


/*************************************
text の色、太さ
*************************************/
.main_green {
	color: #164b09;
}
.main_lightgreen {
	color: #d0e9cf;
}
.text_bold {
	font-weight: bold;
}
.color_red {
	color: #e20707;
}
.color_purple {
	color: #993bab;
}
.color_orange {
	color: 	#f96800;
}

/*****************************************
ウインドウ幅によって改行    (.line_break)
*****************************************/
/* ブレイクポイント：767px */
.line_break {
	display: none;
}
@media screen and (max-width: 767px) {
	.line_break {
		display: block;
	}	
}


/*****************************
ボタン　共通    (.btn)
*****************************/
.btn a {
	display: flex;
    align-items: center;
    justify-content: center;
	text-decoration: none;
}


/*****************************
パンくずリスト    (#breadcrumb)
*****************************/
#breadcrumb {
	background-color: #fff;
}
#breadcrumb ul {
	max-width: 1200px;
	padding: 3px 20px 20px 20px;
	margin: 0 auto;
}
#breadcrumb ul li {
	font-size: 80%;
	display: inline-block;
	line-height: 1;
}


/*********************************************
アコーディオンメニュー    (details と summary)
※個々の矢印設定はそれぞれの css へ
*********************************************/
/* デフォルトの三角形アイコンを消す */
summary {
	list-style-type: none;
}
/* Safariのデフォルトの三角形アイコンを消す */
summary::-webkit-details-marker {
  display: none;
}


/*****************************
ご注文はこちらボタン
（hover時に線色と背景色反転）
*****************************/
.btn_order {
	width: 100%;
}
.btn_order a {
	width: 88%;
	height: 60px;
    border: 2px solid #ffb100;
    background-color: #ffb100;
    border-radius: 30px;
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
	margin: 0 0 0 auto;
}
.btn_order a:hover,
.btn_order a:active {
    color: #ffb100!important;
    background-color: #fff;
	opacity: 1;
}
@media screen and (max-width: 767px) {
	.btn_order a {
		height: 60px;
		width: 50%;
		border-radius: 40px;
		margin: 0 auto;
		font-size: 1.4rem;
	}
}


/*****************************
下からふわっとフェイドイン
*****************************/
.fadeIn_up {
	opacity: 0;
	transform: translateY(50px); /* 下に50px下げておく */
	transition: opacity 1.5s, transform 1.5s;
}
.fadeIn_up.is-show {
	opacity: 1;
	transform: translateY(0); /* 元の位置に戻る */
}


/*****************************
最下部ボタングループ
*****************************/
.btn_group {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
	padding: 60px 0;
	background-color: #fff;
}

/* トップへ戻る */
.btn_to_top {
	height: 40px;
}
.btn_to_top a {
	position: relative;
	width: 185px;
	height: 40px;
    color: #fff;
	background-color: #44912f;
	border: 2px solid #44912f;
	border-radius: 16px;
	font-size: 0.875rem;
    font-weight: bold;
	padding-left: 3px;
	margin-left: 50px;
}
.btn_to_top a:hover {
	opacity: 1;
	color: #44912f;
	background-color: #fff;
}
.btn_to_top a::before {
	position: absolute;
	content: "";
	width: 6px;
	height: 6px;
	top: 50%;
	left: 15px;
	border-top: 2px solid #fff;
	border-left: 2px solid #fff;
	transform: translateY(-50%) rotate(-45deg);
}
.btn_to_top a:hover::before {
	opacity: 1;
	border-top: 2px solid #44912f;
	border-left: 2px solid #44912f;
}
.btn_to_top a span {
	margin-left: 15px;
}

@media screen and (max-width: 767px) {
	.btn_group {
		flex-direction: column;
		width: 100%;
		text-align: center;
		padding: 35px 0;
	}
	.btn {
		width: 100%;
	}
	.btn_to_top {
		margin-bottom: 20px;
	}
	.btn_to_top a {
		margin: 0 auto;
	}
}