@charset "UTF-8";
/*
Theme Name: 1os1C
Theme URI: https://web.1os.co.jp/
Author: One OS inc.
Author URI: https://1os.co.jp/
Description: このテーマは株式会社ワンオーエス(サービス名：クオリティWebデザイン)によって作成されました。高品質でカスタマイズ可能なデザインを提供し、ユーザーに素晴らしいエクスペリエンスをもたらします。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: 1os_mc
Tags: レスポンシブ, 1カラム, 翻訳対応
*/

/**********  カスタマイズCSS **********/

#header_wrapper{
	background: none;
}

#header_wrapper::before{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(53,16,0, 0.8) 0%,
		rgba(53,16,0, 0.4) 70%,
		rgba(53,16,0, 0) 100%
	);
	opacity: 0;
	transition: opacity .4s ease-in-out;
	pointer-events: none;
}

.scroll #header_wrapper::before{
	opacity: 1;
}
#nav_toggle{
	background:none;
}

#global_nav_wrapper{
	top:0;
	padding-top:50px;
}

/* -- design_box ---------------------------------- */

.design_box-01-left {
}
.design_box-01 .title_number {
	font-size: 4em;
	color: #c7a46a;
	font-weight: 700;
	line-height: 1;
	margin-right:.2em;
}
.design_box-01 .title_text {
	font-size: 1.6em;
	line-height: 1.2;
	margin-top:.6em;
}
.design_box-01 .content_text{
	margin:.6em 2.4em 0;
}

@media(min-width:1024px){

	#global_nav_wrapper{
		position:fixed;
		overflow-y:auto;
		-webkit-overflow-scrolling: touch;
		visibility:hidden;
		z-index: 20;
		left:auto!important;
		right:0;
		top:0;
		bottom:0;
		padding-top:60px;
		opacity:1;
		transform:translateX(100%);
		transition:all .5s ease, transform .5s ease-in-out;
		background-color:rgba(53, 16, 0, 0.5);
		max-width:320px;
	}
	#global_nav_wrapper.is_visible{
		visibility:visible;
		opacity:1;
		transform:translateX(0);
	}
	#wrapper_cover{
		inset:0;
		z-index:20;
		background-color:transparent;
		opacity:0;
		pointer-events:none;
		transition: opacity .5s ease-in-out, background-color .5s ease-in-out;
	}
	.nav_open #wrapper_cover{
		background-color:rgba(53,16,0,0.5);
		opacity:1;
		pointer-events:auto;
	}

/* -- design_box ---------------------------------- */

	.design_box-01 {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.design_box-01 .content_text{
		margin-left:2.8em;
	}
	.design_box-01-left{
	}
	.design_box-01-right {
		width: 40%;
		flex: 0 0 40%;
	}


}
@media(min-width:1440px){

	#nav_toggle{
		right:3rem;
	}

}