@charset "UTF-8";
/*
ブレイクポイントは以下3段階で設定されています。
(width>=1512px)
(width>=1024px)
(width>=768px)
*/

/*フォントサイズ
10px  = 0.625rem
11px  = 0.6875rem
12px  = 0.75rem
13px  = 0.8125rem
14px  = 0.875rem
15px  = 0.9375rem
16px  = 1rem
17px  = 1.0625rem
18px  = 1.125rem
19px  = 1.1875rem
20px  = 1.25rem
21px  = 1.3125rem
22px  = 1.375rem
23px  = 1.4375rem
24px  = 1.5rem
25px  = 1.5625rem
26px  = 1.625rem
27px  = 1.6875rem
28px  = 1.75rem
29px  = 1.8125rem
30px  = 1.875rem
31px  = 1.9375rem
32px  = 2rem
*/
/*----------------------
compornent_parts
----------------------*/
.tac {
	text-align: center !important;
}
.txt_link {
	text-decoration: underline;
}
.note > li {
	padding-left: 1em;
	margin-left: -1em;
}

/*--------------------------------------------------------------------------------------------------------------
compornent_parts コンポネパーツを実装する場合この範囲にSP、PCともにCSSを追記
--------------------------------------------------------------------------------------------------------------*/
.tac {
	text-align: center !important;
}
.txt_link {
	text-decoration: underline;
}
.note > li {
	padding-left: 1em;
	margin-left: -1em;
}

/*modal*/

@media screen and (max-width: 640px) {
	.modal-open{overflow:hidden}
	.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1500;display:none;overflow:hidden;-webkit-overflow-scrolling:touch;outline:0}
	.modal.fade .modal-dialog{-webkit-transition:-webkit-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:transform .3s ease-out;-webkit-transform:translate(0,-25%);-ms-transform:translate(0,-25%);-o-transform:translate(0,-25%);transform:translate(0,-25%)}
	.modal.in .modal-dialog{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}
	.modal-open .modal{overflow-x:hidden;overflow-y:auto}
	.modal-dialog{position:relative;width:auto;margin:10px}
	.modal-content{position:relative;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #999;border:1px solid rgba(0,0,0,.2);border-radius:6px;outline:0;-webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);box-shadow:0 3px 9px rgba(0,0,0,.5)}
	.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;background-color:#000}
	.modal-backdrop.fade{filter:alpha(opacity=0);opacity:0}
	.modal-backdrop.in{filter:alpha(opacity=50);opacity:.5}
	.modal-header{min-height:16.42857143px;padding:15px;text-align:right}
	.modal-header .close{margin-top:-2px;padding:.214rem .714rem;color:#fff;font-size:1.285rem;line-height:1;text-decoration:none;background-color:#666;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px}
	.modal-title{margin:0;line-height:1.42857143}
	.modal-body{position:relative;padding:15px}
	.modal-body p{color:#000;font-size:12px;text-align:center}
	.modal-body p.mainText{font-size:18px;font-weight:bold}
	.modal-footer{overflow:hidden;padding:15px 15px 60px;text-align:center}
	.modal-footer .grayBtn04,.modal-footer .grayBtn05{width:50%;padding-right:10px}
	.modal-footer > p:last-child{width:50%;padding-right:10px;padding-left:10px}
	.modal-footer .grayBtn04 a{width:100%;max-width:120px;padding:.714rem 1.071rem .571rem;text-align:center;background-position:1.857rem .857rem}
	.modal-footer .grayBtn05 a{width:120px;padding:.714rem 1.071rem .571rem;text-align:center;background-position:76.29% .857rem}
	.modal-footer .grayBtn04,.modal-footer .grayBtn05{display:inline-block}
	.modal-footer .grayBtn04 a,.modal-footer .grayBtn05 a{background-image:none}
	.modal-footer .btn + .btn{margin-bottom:0;margin-left:5px}
	.modal-footer .btn-group .btn + .btn{margin-left:-1px}
	.modal-footer .btn-block + .btn-block{margin-left:0}
	.modal-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}
}
@media (min-width: 768px) {
	.modal-dialog{width:600px;margin:30px auto}
	.modal-content{-webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);box-shadow:0 5px 15px rgba(0,0,0,.5)}
	.modal-sm{width:300px}
}
@media (min-width: 992px) {
	.modal-lg{width:900px}
}
.modal-footer .btn-default,.modal-footer .btn-primary{display:inline-block;padding:.571rem 1.5rem;height:auto;font-weight:bold;text-align:center;border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;background-color:#eee;box-shadow:0 3px 0 0 #a6a6a6}
.modal .modal-htmlViewWarp{display:none}
.modal.htmlView .modal-htmlViewWarp{display:block}
.modal.htmlView .modal-LinkWarp,.modal.htmlView .modal-footer{display:none}
.modal .elBrochure{display:none}
.modal.elBrochureWarp .elBrochure{display:block;width:90%;margin:16px auto;padding:14px;border:1px solid #e60000}
.modal.elBrochureWarp .elBrochure .elBrochureTitle{margin-bottom:14px;font-weight:bold;color:#e60000}
.viewHtmlWarp{display:none}
.modal .mainText02{display:none}
.modal.mainTextType02 .mainText02{display:inline;width:100%}
.modal.mainTextType02 .mainText01{display:none}
.modal-open{overflow:hidden}
.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1050;display:none;overflow:hidden;-webkit-overflow-scrolling:touch;outline:0}
.modal.fade .modal-dialog{-webkit-transition:-webkit-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:transform .3s ease-out;-webkit-transform:translate(0,-25%);-ms-transform:translate(0,-25%);-o-transform:translate(0,-25%);transform:translate(0,-25%)}
.modal.in .modal-dialog{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}
.modal-open .modal{overflow-x:hidden;overflow-y:auto}
.modal-dialog{position:relative;width:auto;margin:10px}
.modal-content{position:relative;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #999;border:1px solid rgba(0,0,0,.2);border-radius:6px;outline:0;-webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);box-shadow:0 3px 9px rgba(0,0,0,.5)}
.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;background-color:#000}
.modal-backdrop.fade{filter:alpha(opacity=0);opacity:0}
.modal-backdrop.in{filter:alpha(opacity=50);opacity:.5}
.modal-header{min-height:16.42857143px;padding:15px;text-align:right}
.modal-header .close{margin-top:-2px;padding:.214rem .714rem;color:#fff;font-size:1.285rem;line-height:1;text-decoration:none;background-color:#666;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px}
.modal-title{margin:0;line-height:1.42857143}
.modal-body{position:relative;padding:15px}
.modal-body p{color:#000;font-size:14px;text-align:center}
.modal-body p.mainText{font-size:22px;font-weight:bold}
.modal-footer{overflow:hidden;padding:15px 15px 60px;text-align:center}
.modal-footer .grayBtn04,.modal-footer .grayBtn05{display:inline-block}
.modal-footer .grayBtn04 a,.modal-footer .grayBtn05 a{padding:1rem 1.285rem .857rem;text-align:center;background-image:none}
.modal-footer .grayBtn04{margin-right:20px}
.modal-footer .btn + .btn{margin-bottom:0;margin-left:5px}
.modal-footer .btn-group .btn + .btn{margin-left:-1px}
.modal-footer .btn-block + .btn-block{margin-left:0}
.modal-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}
.modal-dialog{width:600px;margin:30px auto}
.modal-content{-webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);box-shadow:0 5px 15px rgba(0,0,0,.5)}
.modal-sm{width:300px}
.modal-footer .btn-default,.modal-footer .btn-primary{display:inline-block;padding:.571rem 1.5rem;height:auto;font-weight:bold;text-align:center;border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;background-color:#eee;box-shadow:0 3px 0 0 #a6a6a6}
.modal .modal-htmlViewWarp{display:none}
.modal.htmlView .modal-htmlViewWarp{display:block}
.modal.htmlView .modal-LinkWarp,.modal.htmlView .modal-footer{display:none}
.modal .elBrochure{display:none}
.modal.elBrochureWarp .elBrochure{display:block;width:90%;margin:16px auto;padding:14px;border:1px solid #e60000}
.modal.elBrochureWarp .elBrochure .elBrochureTitle{margin-bottom:14px;font-weight:bold;color:#e60000}
.viewHtmlWarp{display:none}
.modal .mainText01{display:inline}
.modal .mainText02{display:none}
.modal.mainTextType02 .mainText02{display:inline;width:100%}
.modal.mainTextType02 .mainText01{display:none}
.modalWrap input{display:none}
.modalOverlay{overflow:auto;position:fixed;top:0;left:0;z-index:999999;width:100%;height:100%;background:rgba(0,0,0,.5);opacity:0;-webkit-transition:opacity .3s,-webkit-transform 0 .3s;transition:opacity .3s,-webkit-transform 0 .3s;transition:opacity .3s,transform 0 .3s;transition:opacity .3s,transform 0 .3s,-webkit-transform 0 .3s;-webkit-transform:scale(0);transform:scale(0)}
.modalOverlay::-webkit-scrollbar{width:10px}
.modalOverlay::-webkit-scrollbar-track{background:#fff;border-left:solid 1px #ececec}
.modalOverlay::-webkit-scrollbar-thumb{background:#ccc;border-radius:10px;-webkit-box-shadow:inset 0 0 0 2px #fff;box-shadow:inset 0 0 0 2px #fff}
.modalTrigger{position:absolute;top:0;left:0;width:100%;height:100%}
.modalContent{position:relative;top:50%;width:100%;margin:0 auto;border-radius:6px;border:1px solid #585858;background:#fff;box-shadow:0 5px 15px rgba(0,0,0,.5);transform:translateY(-50%);-webkit-transition:.3s;transition:.3s}
.modalContentInner{padding:75px 15px 15px;text-align:center}
#ancModalSideNav .modalContentInner{padding-bottom:40px}
.closeButton{position:absolute;top:12px;right:6px;width:20px;height:20px;border-radius:3px;background:#fff;cursor:pointer}
.closeButton::before,.closeButton::after{content:'';display:block;position:absolute;top:50%;left:0;right:0;margin:auto;width:25px;height:2px;margin-top:-1px;margin-left:-7px;background:#989898}
.closeButton::before{transform:rotate(45deg)}
.closeButton::after{transform:rotate(-45deg)}
.modalWrap input:checked ~ .modalOverlay{opacity:1;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:opacity .5s;transition:opacity .5s}
#ancModalSideNav .modalContent{top:0;transform:translateY(0)}

/* 外部リンク */
.modalContentInner .mainText{font-size:1.57143rem;line-height:1.30909;text-align:center;font-weight:bold;word-break:break-all;overflow-wrap:break-word}
.modalFooter{display:flex;justify-content:center;margin:15px 0 60px}
.modalFooter > *{padding:0 10px}
.modalFooter .btn03{display:inline-block;padding:10px 15px;width:140px;max-width:120px;border-radius:6px;border:2px solid #fff;background:#fff;box-shadow:0 1px 3px 0 rgba(0,0,0,0.5);color:#333;font-size:.8572rem;font-weight:bold;line-height:1.2;text-align:center;text-decoration:none;-webkit-transition:all .2s;transition:all .2s}
.modalFooter .btn03:hover{color:#E60000;box-shadow:0 3px 9px 0 rgba(0,0,0,0.25)}
input[type="submit"], input[type="image"], button, select, label {cursor: pointer;}


@media screen and (min-width: 641px){
	/*---------------
	modal
	------------------*/
	.modalContent{width:598px}
	.modalContentInner{padding:75px 15px 15px}
	.modalFooter .btn03{font-size:1.2858rem}
	#ancModalSideNav .modalContent{width:1140px;transform:translateY(-50%);top:50%}
	#ancModalSideNav .modalContentInner{padding-bottom:80px}
	}

/*--------------------------------------------------------------------------------------------------------------
compornent_parts_end
--------------------------------------------------------------------------------------------------------------*/

/*----------------------
base
----------------------*/
body {
	background: #F4F4F0;
	color: #54524F;
}
.bg__red {
	background: #F4F4F0;
	border-radius: 32px 32px 32px 32px;
}
.acc {
	background: #fff;
	border-radius: 10px 10px 10px 10px;
}
.acc + .acc {
	margin-top: 6%;
}
.acc .acc__label label {
	position: relative;
	cursor: pointer;
	width: 100%;
	display: block;
	color: #E5263F;
	font-weight: bold;
	padding: 5% 11% 5% 4%;
	font-size: 0.8125rem;
}
.acc .acc__label label:after {
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 50% 50% 50% 50%;
	background: url(/oen/list/artbrut/assets/images/acc_icon_001.png);
	background-size: contain;
	background-repeat: no-repeat;
	transform: rotate(180deg);
	transition: transform 0.5s;
	position: absolute;
	right: 5%;
	top: 32%;
}
.acc > input:checked + .acc__label label:after {
	transform: rotate(0deg);
	transition: transform 0.5s;
}
.acc > input {
	position: absolute;
	left: -999999px;
}
.acc > dd {
	padding: 0% 5%;
	font-size: 0.75rem;
	max-height: 0;
	opacity: 0;
	transition: padding 0.5s, max-height 0.5s, opacity 0.8s;
	overflow: hidden;
}
.acc > input:checked ~ .acc__label ~ dd{
	max-height: 9000px;
	opacity: 1;
	padding: 1% 5% 6%;
}

.p-front__bg--1 {
	display: block;
	height: auto;
	position: absolute;
	left: 17vw;
	top: 19.4vw;
	width: 48.4vw;
}
.p-front__bg--1 img {
	height: auto;
}
.main__wrap {
	background: #E4E4E4;
	padding-bottom: 0;
	overflow: hidden;
}
.main__wrap > * {
	padding: 0 6%;
}


.main__wrap img {
	border-radius: 0px;
}
.p-front__mainCardSlide img {
	border-radius: 4px;
}

.p-front__copyright img {
	height: 100%;
}

.p-front__kv {
	padding-top: 12%;
	margin-bottom: 15%;
}
.p-front__kv .kv_img {
	width: 96%;
	margin-bottom: 3%;
}
.p-front__kv .kv_txt01 {
	margin: 0 -3%;
}
.p-front__kv .kv_txt01 img {
	width: 95%;
}
.main__wrap .p-front__mainCard {
	position: static;
	margin-bottom: 14.9%;
	padding-left: 0;
	padding-right: 0;
}


.p-front__kv__message {
	margin-bottom: 14%;
	position: relative;
}
.p-front__kv__message .message__link {
	position: absolute;
	display: block;
	width: 11%;
	height: 7%;
	right: 17%;
	bottom: 8%;
}
.p-front__kv__download .download__head {
	margin-bottom: 4%;
}
.p-front__kv__download .download__head img{
	width: 76%;
}
.p-front__kv__download .kv__download__flex{
	display: flex;
}
.p-front__kv__download .kv__download__flex > .iOS {
	margin-right: 7%;
}


.p-front__feature {
	margin: 19% 0 33%;
	padding: 17% 23px 12%;
	position: relative;
}
.p-front__feature .feature_head {
	width: 100%;
	margin-bottom: 13%;
}
.p-front__feature .feature_head img {
	width: 98%;
}
.p-front__feature .feature_list {
	padding: 11% 21px 11%;
	background: #E4E4E4;
	border-radius: 17px 17px 17px 17px;
}
.p-front__feature .feature_list .feature01 {
	margin-bottom: 12%;
}
.p-front__feature .feature_list .feature01_head {
	margin-bottom: 6%;
}

.p-front__feature .feature_list .feature01_img_01 {
	margin-bottom: 4%;
}
.p-front__feature .feature_list .feature02 {
	margin-bottom: 12%;
}
.p-front__feature .feature_list .feature02_head {
	margin-bottom: 11%;
}
.p-front__feature .feature_list .feature02_head img {
	width: 96%;
}
.p-front__feature .feature_list .feature03_head {
	margin-bottom: 7%;
}
.p-front__feature .feature_list .feature03_head img {
	width: 83%;
	margin: 0 3% 0 0;
}


.p-front__mainStep {
	position: static;
	margin-bottom: 14%;
}

.p-front__mainStep .mainStep__head {
	margin-bottom: 7%;
}
.p-front__mainStep .mainStep__head img {
	width: 80%;
}
.p-front__mainStep .p-front__mainStep__List .step01 {
	position: relative;
	margin-bottom: 13%;
}
.p-front__mainStep .p-front__mainStep__List .step01 .mainStep__List__flex {
	position: absolute;
	display: flex;
	margin: 0 5% 0;
	bottom: 6.9%;
}
.p-front__mainStep .p-front__mainStep__List .step01 .mainStep__List__flex .iOS {
	margin-right: 6%;
}
.p-front__mainStep .p-front__mainStep__List .step02 {
	margin-bottom: 14%;
}


.p-front__landing {
	margin-bottom: 19.8%;
}
.p-front__landing .landing_img_001 {
	margin: 0 -3% 13%;
}
.p-front__landing .landing_img_001 img {
	width: 100%;
}
.p-front__landing .landing_img_002 {
	margin-bottom: 14.8%;
}
.p-front__landing .landing_img_002 img {
	width: 100%;
}
.p-front__landing .landing_btn_wrap {
	margin-bottom: 14%;
}
.p-front__landing .landing_btn_hrad {
	margin-bottom: 1.4%;
}
.p-front__landing .landing_btn_hrad img {
	width: 57%;
}
.p-front__landing .landing_btn_001 img {
	width: 70%;
	display: inline-block;
}


.p-front__question {
	margin-bottom: 8%;
}
.p-front__question .question_head {
	margin-bottom: 9%;
}
.p-front__question .question_head img {
	width: 64%;
}
.p-front__question .question_btn_wrap {
	margin-top: 10%;
}
.p-front__question .landing_btn_001 {
	width: 91%;
	margin: 0 auto;
}

.p-front__mainBtm {
	margin-bottom: 8%;
}
.p-front__mainBtm .share__head {
	margin-bottom: 6%;
}
.p-front__mainBtm .share__head img {
	width: 53%;
}
.p-front__mainBtm .share__list {
	display: flex;
	justify-content: space-between;
	width: 53%;
	margin: 0 auto;
}
.p-front__mainBtm .share__list > li + li {
	margin-left: 6%;
}


.p-front__footer {
	color: #54524F;
	padding-top: 12%;
	padding-bottom: 10%;
	font-size: 0.625rem;
	border-radius: 32px 32px 0 0;
}
.p-front__footer .copy {
	margin-top: 10%;
}
/*----------------------
(width>=768px)
----------------------*/
@media print and (width>=768px),screen and (width>=768px){
	.main__wrap {
		border-radius: 32px 32px 32px 32px;
	}
}



/*----------------------
(width>=1024px)
----------------------*/
@media print and (width>=1024px),screen and (width>=1024px){
	.p-front__box {
		display: flex;
		justify-content: center;
		padding-top: 10vh;
		gap: 30px;
	}
	.p-front__boxHead {
		position: static;
	}
	.p-front__boxFoot {
		position: static;
	}

}



/*----------------------
(width>=1512px)
----------------------*/
@media print and (width>=1512px),screen and (width>=1512px){
	.main__wrap > * {
		padding: 0 32px;
	}
	.p-front__kv {
		padding-top: 12%;
	}

	.p-front__feature {
		margin: 19% 0 20%;
		padding: 16% 23px 12%;
		position: relative;
	}
	.p-front__footer {
		padding-top: 12%;
		padding-bottom: 10%;
	}
}