html{
 scroll-behavior: smooth;
}
#smsidenavi {
	display: none!important;
}
#contents{
 width: 480px;
}
h2:not(:first-child), #info h2, #flow h2{
 font-size: 22px;
 color: #333;
 border-bottom: none;
 text-align: center;
 padding: 0;
 margin-bottom: 0;
}
#jp_hako, #jp_ita, #jp_novelty, #info{
	background: #f8f5ed;
	padding: 20px 0 0;
}
h3{
 font-size: 18px;
 font-weight: bold;
 color: #333;
 padding-left: 50px;
 position: relative;
}
#jp_ita, #jp_novelty, #contents #info, #flow, #contents #flow h2, #contents #flow+h2{
 margin-top: 100px;
}

/*ホバーアニメーション*/
#jp_menu .menu_btn:hover, .content_btn li:hover, #jp_Box1 a:hover, #jp_Box6>a:hover, #jp_Box9 a:hover, .content_btn2 a:hover, #info a:hover, #jp_faq .button-brown:hover, .window a:hover:not(.more_right), .nav_btn:hover{
 transform: translateY(3px);
}

/*アシスタント箱丸くん*/
.hakomaru{
 position: relative;
}
.hakomaru p{
 position: absolute;
 top: 20px;
 left: 50px;
 z-index: 1;
 width: 370px;
 text-align: center;
}
.hakomaru img{
 display: block;
 margin: 60px auto;
 width: 460px;
 height: 215px;
}
#jp_hako+div .hakomaru img{
 display: block;
 margin: 20px auto 0;
	height: 230px;
}
#jp_hako+div .hakomaru p{
	top: 25px;
}

/*ファーストビュー*/
#jp_first{
 background-image: url(/img/jp/jp_first-back_sm.jpg);
 background-repeat: no-repeat;
 position: relative;
 width: 460px;
 height: 335px;
 margin: 0 auto;
}
#jp_first .first-text-box{
	position: absolute;
 top: 15px;
 left: 10px;
 width: 440px;
}
#jp_first .first-text-box+a {
 position: absolute;
 top: 95px;
 left: 20px;
}
#jp_first .first-text-box+a>picture>img{
 width: 90px;
 height: auto;
}
#jp_first h1{
 color: #333;
 font-weight: bold;
 line-height: 1.1;
 text-align: center;
 margin-top: 15px;
 padding: 0;
 border-bottom: none;
}
#jp_first p, #jp_first p span{
 color: #fff;
 font-weight: bold;
 text-align: center;
 border-radius: 50px;
 width: 365px;
 padding: 5px 0;
 margin: 0 auto;
}
#jp_first p{
 font-size: 16px;
 line-height: 1.2;
 background: #f98500;
}
#jp_first p span{
 font-size: 20px;
}
#jp_first ul{
 display: flex;
 position: absolute;
 top: 150px;
	width: 460px;
	justify-content: center;
}
.img1, .img2{
 width: 100px;
 height: auto;
}
.img2{
 display: none;
}
#jp_first ul li:hover > .img1 {
 display: none;
}
#jp_first ul li:hover > .img2 {
 display: block;
}


/*オーダーメイド一覧*/
#jp_menu div{
 border: solid 1.5px #c2c2c2;
 border-radius: 5px;
 height: 280px;
 width: 405px;
 position: relative;
}
#jp_menu .menu_box{
 width: 405px;
 height: 335px;
 border-radius:5px;
 margin: 0 auto 45px;
}
#jp_menu .menu_box img{
 border-radius: 0 0 5px 5px;
 position: absolute;
 bottom: 0;
 width: 402px;
 height: 129px;
}
#jp_menu .button-brown{
 font-size: 20px;
 border-radius: 50px;
 height: 45px;
 line-height: 45px;
 margin: 0 auto 10px;
}
#jp_menu .arrow-white::after{
 transform: rotate(90deg);
}
#jp_menu .menu_select{
 list-style-type: none;
 margin: 15px;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
	
}
#jp_menu .menu_select li{
 margin: 3px;
 width: calc(40% + 10px);
 position: relative;
 padding-left: 13px;
}
#jp_menu .menu_select li a{
 color: #159DD9;
}
#jp_menu .menu_select li::before{
 content: "";
 position: absolute;
 top: 50%;
 left: 0;
 transform: translateY(-50%);
 border: 5px solid transparent;
 border-left: 8px solid #159DD9;
}


/*コンテンツ共通*/
.back_color{
 background-color: #f8f5ed;
 padding: 20px 10px;
}
.content_box{
 background-color: #fff;
 margin-bottom: 20px;
 padding: 0 10px;
 border-radius: 5px;
}
.content_box:last-child, .content_box:nth-child(8){
 margin-bottom: 0;
}

/*開いてるコンテンツ*/
#jp_Box1, #jp_Box9{
	height: 70px;
	margin-bottom: 0;
	display: grid;
	place-items: center start;		
}
h3+picture>img{
 display: block;
 margin: 0 auto;
 width: 400px;
 height: 173px;
}
.back_color div.content_box{
	padding-bottom: 10px;
}
/*出来ること*/
.point_corner{
 border: solid 4px #d9bb92;
 border-radius: 3px;
 margin-top: 30px;
 position: relative;
 border-collapse: collapse;
}
.point_corner::before{
 content: "";
 position: absolute;
 top: -37px;
 left: 200px;
 border: 15px solid transparent;
 border-top: 20px solid #d9bb92;
 transform: rotate(180deg);
}
.point_corner li:first-child::before{
 content: "";
 background-image: url(/img/jp/jp_point-icon.png);
 background-repeat: no-repeat;
 display: block;
 width: 35px;
 height: 22px;
 position: absolute;
 left: 10px;
 top: 5px;
 background-size: 30px;
}
.point_corner li:first-child{
 background-color: #d9bb92;
 padding: 5px 45px;
 font-weight: bold;
}
.point_corner li:not(:last-child){
 border-bottom: solid 4px #d9bb92;
}
.point_corner li p{
 font-size: 15px;
 font-weight: bold;
 margin: 10px 20px 5px;
}
.point_corner li p::before{
 content: "◎";
 font-size: 18px;
 font-weight: bold;
 color: #e03619;
 margin: 0;
}
.point_corner img{
 width: 420px;
 height: auto;
 display: block;
 margin: 0 auto 15px;;
}
/*(茶色)コンテンツボタン*/
div.content_box .button-brown{
	width: 360px;
}


/*閉じてるコンテンツ*/
.content_box summary{
	list-style: none;
	position: relative;
	height: 60px;
}
.content_box summary h3{
	margin-bottom: 0;
	width: 380px;
	height: 60px;
	display: grid;
	place-items: center start;
	line-height: 1.2;
}
.content_box summary::-webkit-details-marker {
	display: none;
}
.content_box summary::before, .content_box summary::after {
	content: '';
	position: absolute;
	right: calc(2em + -17px);
	top: calc(3em + -30px);
	width: 3px;
	height: 20px;
	border-radius: 5px;
	background-color: #333;
}
.content_box summary::before {
	rotate: 90deg;
}
.content_box summary::after {
	transition: rotate .3s;
}
.content_box[open] summary::after {
	rotate: 90deg;
}
details {
	position: relative;
}
details picture img{
	margin: 10px auto 0;
	display: block;
}
.content_box p:nth-child(3){
	width: 400px;
	margin: 15px auto;
}

/*(茶色)お問合せボタン*/
details.content_box .button-brown{
	width: 230px;
	height: 40px;
	line-height: 40px;
	margin: 20px auto;
	position: absolute;
	bottom: 0;
	left: 120px;
}
details.content_box .arrow-white::after{
 transform: rotate(90deg);	
}
.back_color:nth-child(5) details:nth-child(6) .button-brown{
	width: 360px;
	height: 45px;
	line-height: 45px;
	font-size: 16px;
	position: absolute;
	bottom: -5px;
	left: 45px;
}
.back_color:nth-child(5) details:nth-child(6) .button-brown::after{
	transform: rotate(00deg);	
}

/*コンテンツボタン*/
.content_btn{
 width: 415px;
 margin: 0 auto;
 display: flex;
 flex-wrap: wrap;
 gap: 15px;
 padding-bottom: 80px;
}
.content_btn2{
 margin-top: 25px;
}
.content_btn li, .content_btn2 li{
 background-color: #fff;
 box-shadow: 0 2px 5px rgb(0,0,0,0.3);
 border-radius: 5px;
 position: relative;
 width: 200px;
 height: 60px;
}
.content_btn p{
 color: #333;
 line-height: 1.5;
 display: flex;
 width: 98px;
 height: 40px;
 align-items: center;
 position: absolute;
 top: 10px;
 right: 35px;
 font-size: 14px;
 font-weight: bold;
}
.content_btn li::before, .content_btn2 p::before{
	content: '';
	display: block;
	width: 14px;
	height: 14px;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 10px;
	margin: auto;
	transition: 0.2s;
	background: url(/img/icon/arrow-brown.svg) no-repeat center / contain;
}
/*コンテンツボタン　画像*/
.content_btn img{
 width: 60px;
 height: auto;
 border-radius: 3px 0 0 3px;
}

/*箱・板（アイコン）*/
#jp_Box1::after, #jp_Box2::after, #jp_Box3::after, #jp_Box4::after, #jp_Box5::after, #jp_Box6::after, #jp_Box7::after, #jp_Box8::after, #jp_Box9::after, #jp_Box10::after, #jp_Box11::after, #jp_Box12::after, #jp_Box13::after{
 content: "";
 background-repeat: no-repeat;
 width: 50px;
 height: 40px;
 position: absolute;
 left: 0px;
 top: 15px;
}
#jp_Box1::after{
 background-image: url(/img/jp/jp_Box1-icon.png);
 background-size: 40px;
}
#jp_Box2::after{
 background: url(/img/jp/jp_Box2-icon.png)no-repeat;
 background-size: 40px;
}
#jp_Box3::after{
 background: url(/img/jp/jp_Box3-icon.png)no-repeat;
 background-size: 40px;
}
#jp_Box4::after{
 background: url(/img/jp/jp_Box4-icon.png)no-repeat;
 background-size: 40px;
}
#jp_Box5::after{
 background: url(/img/jp/jp_Box5-icon.png)no-repeat;
 background-size: 40px;
}
#jp_Box6::after{
 background: url(/img/jp/jp_Box6-icon.png)no-repeat;
 background-size: 40px;
}
#jp_Box7::after{
 background: url(/img/jp/jp_Box7-icon.png)no-repeat;
 background-size: 40px;
}
#jp_Box8::after{
 background: url(/img/jp/jp_Box8-icon.png)no-repeat;
 background-size: 40px;
}
#jp_Box9::after{
 background: url(/img/jp/jp_Box9-icon.png)no-repeat;
 background-size: 40px;
}
#jp_Box10::after{
 background: url(/img/jp/jp_Box10-icon.png)no-repeat;
 background-size: 40px;
}
#jp_Box11::after{
 background: url(/img/jp/jp_Box11-icon.png)no-repeat;
 background-size: 40px;
}
#jp_Box12::after{
 background: url(/img/jp/jp_Box12-icon.png)no-repeat;
 background-size: 40px;
}
#jp_Box13::after{
 background: url(/img/jp/jp_Box13-icon.png)no-repeat;
 background-size: 40px;
}


/*ノベルティ*/
#jp_novelty+div>p{
 font-size: 15px;
 width: 430px;
 margin: 0 auto;
}
.content_btn2{
 display: flex;
 flex-wrap: wrap;
 justify-content: space-around;
 margin: 20px auto 0;
}
.content_btn2 li{
 width: 210px;
 height: 150px;
 margin-bottom: 25px;
}
.content_btn2 img{
 margin: 15px;
 width: 180px;
}
.content_btn2 p{
 font-size: 16px;
 font-weight: bold;
 color: #333;
 text-align: center;
 position: relative;
}
.content_btn2 p::after{
 right: 35px;
}
.content_btn2 p::before{
 right: 20px;
}


/*相談*/
#info +p{
	font-size: 15px;
	background: #f8f5ed;
	padding: 15px 15px 10px;
}
#info + p + ul {
	padding: 0 20px;
	background-color: var(--beige_l);
}
#info + p + ul li {
	color: var(--brown_d);
	font-size: 18px;
	font-weight: bold;
}
#info + p + ul li + li {
	margin-top: 10px;
}
#info + p + ul span {
	display: inline-block;
	width: 100px;
	text-align: center;
	color: var(--white);
	font-size: 18px;
	font-weight: bold;
	background-color: var(--brown_d);
	border-radius: 5px;
	padding: 5px 10px;
	margin-right: 5px;
}
/* お電話・オンライン相談・LINE */
#contact_information {
	background-color: var(--beige_l);
	padding: 20px;
}
#contact_information li {
	padding-bottom: 30px;
	text-align: center;
	border-bottom: dashed 2px var(--brown_d);
}
#contact_information li + li {
	margin-top: 30px;
}
#contact_information h3, #info_form h3 {
	font-size: 20px;
	line-height: 30px;
	padding-left: 35px;
	text-align: center;
	color: var(--brown_d);
}
#contact_information li:nth-of-type(1) h3 {
	background: url(/img/icon/title-tel.svg) no-repeat top left 165px / 30px 30px;
}
#contact_information li:nth-of-type(2) h3 {
	background: url(/img/icon/title-onlinemeeting.svg) no-repeat top left 125px / 30px 30px;
}
#contact_information li:nth-of-type(3) h3 {
	background: url(/img/icon/title-line.svg) no-repeat top left 175px / 30px 30px;
}
#info_form h3 {
	background: url(/img/icon/title-mail.svg) no-repeat top left 105px / 30px 30px;
}
#contact_information li:nth-of-type(1) {
	border-top: dashed 2px var(--brown_d);
	padding-top: 30px;
}
#contact_information li:nth-of-type(1) a {
	display: block;
	color: var(--brown_d);
	font-size: 50px;
	font-weight: bold;
	line-height: 1;
}
#contact_information li:nth-of-type(2) .button-brown {
	width: 300px;
	margin-top: 15px;
}
#contact_information li:nth-of-type(3) a {
	display: block;
}
#contact_information li:nth-of-type(3) img {
	width: 160px;
	margin: 0 auto;
}
/* お問い合わせフォーム */
#info_form{
	background: #f8f5ed;
	padding: 20px 15px;
}
#info_form dl:first-of-type + p{
	margin: 20px 0 5px;
	font-weight: bold;
	color: #53392B;
}
#info_form dl:last-of-type + p{
	margin: 10px 0;
}
#info_form span{
	font-size: 15px;
	color: #e03619;
}
#info_form dl:last-of-type{
	background: #fff;
	padding: 15px;
	border-radius: 5px;
}
#info_form dt:not(:first-of-type){
	margin-top: 20px;
}
#info_form select{
	width: 450px;
	height: 45px;
	font-size: 18px;
	padding: 0 10px;
	background: #fff;
	border: solid 1px #c4c4c4;
	-moz-appearance: menulist;
  -webkit-appearance: menulist;
	border-radius: 5px;
}
#info_form textarea{
	max-width: 450px;
	min-width: 450px;
	min-height: 170px;
	padding: 10px;
	font-size: 16px;
	background: #fff;
	border: solid 1px #c4c4c4;
	border-radius: 5px;
}
#info_form dt{
 margin-bottom: 5px;
}
#info_form dd input{
	border: solid 1px #C4C4C4;
	border-radius: 5px;
	width: 100%;
	height: 35px;
	padding: 0 10px;
}
#info_form dd .inputS{
	width: 60px;
	text-align: center;
}
#info_form dd input::placeholder, #info_form textarea::placeholder{
	color: #c4c4c4;
}
#error{
	color: #E03619;
	font-weight: bold;
	margin-bottom: 10px;
}

/*資料お申込み*/
#download{
	border: solid 1.5px #c2c2c2;
	border-radius: 5px;
	margin: 50px 30px 30px;
	padding: 20px 20px 180px 20px;
	background: url(/img/profile/catalog-pdf.png)no-repeat top 265px right 100px / 200px;
}
#download h2{
	border-bottom: none;
	padding: 0;
	margin-bottom: 10px;
	color: #333;
	font-size: 23px;
}
#download p{
	font-size: 16px;
}


/*流れ*/
#flow h2{
	font-size: 20px;
	margin-bottom: 15px;
}
#flow h3{
 font-size: 18px;
 color: #333;
 padding-left: 5px;
 margin: 10px 0 10px 10px;
 border-left: solid 8px #DBBD94;
}
#flow ol{
 padding: 25px 0;
}
#flow li{
 display: flex;
 flex-wrap: wrap;
}
#flow li:not(:last-child){
	margin-bottom: 40px;
}
#flow li p:nth-child(1){
 background: #53392b;
 color: #fff;
 border-radius: 50px;
 margin-left: 35px;
 font-weight: bold;
 width: 110px;
 height: 35px;
 text-align: center;
 line-height: 2.2;
}
#flow li p:nth-child(2){
 font-size: 16px;
 font-weight: bold;
 display: inline-block;
 width: 280px;
 text-align: left;
 margin-left: 25px;
 line-height: 2.2;
}
#flow li img{
 display: block;
 margin: 15px 20px 0 35px;
 width: 110px;
 height: 110px;
}
#flow ol:nth-child(3){
 margin-bottom: 50px
}
#flow li p:nth-child(4){
	width: 280px;
	margin-top: 20px;
}

/*選ばれる理由*/
#contents #jp_appeal{
 border: solid 1.5px #c2c2c2;
 border-radius: 5px;
 width: 405px;
 margin: 100px auto;
 padding-bottom: 10px;
}
#jp_appeal img{
 width: 405px;
 height: auto;
 border-radius: 5px 5px 0 0; 
}
#jp_appeal h2{
 font-size: 20px;
 font-weight: bold;
 color: #333;
 border-bottom: none;
 padding: 0;
 margin: 15px 0;
 text-align: center;
}
#jp_appeal ul{
 margin: 10px 10px 10px 45px;
}
#jp_appeal li{
 position: relative;
 padding-left: 0px;
 line-height: 2;
}
#jp_appeal li::before{
 content: "";
 background-image: url(/img/jp/jp_appeal-icon.png);
 background-repeat: no-repeat;
 display: block;
 width: 27px;
 height: 27px;
 position: absolute;
 left: -35px;
 top: 5px;
}
#jp_appeal span{
 color: #e03619;
 font-weight: bold;
}
#jp_appeal a{
	margin: 0 0 10px 270px;
}


/*質問*/
#jp_faq {
 width: 440px;
 margin: 50px auto 0;
}
#jp_faq h3 {
 font-size: 18px;
 font-weight: bold;
 margin: 0;
 padding: 0;
}
#jp_faq .button-brown{
 position: relative;
 margin: 30px auto 60px;
 box-shadow: 0 2px 5px rgb(0,0,0,0.3);
 font-size: 15px;
 width: 400px;
}
.qa{
	margin-bottom: 15px;
	border-radius: 5px;
 box-shadow: 0 2px 5px rgb(0,0,0,0.3);
}
.qa img{
 padding: 0 40px 20px;;
}
.qa summary {
	list-style: none;
	position: relative;
	padding: 20px 35px 20px 50px;
	color: #333;
	font-weight: bold;
	font-size: 16px;
	cursor: pointer;
}
.qa summary::-webkit-details-marker {
	display: none;
}
.qa summary:hover {
	opacity: 0.8;
}
.qa summary::after{
 content: '';
 width: 12px;
 height: 12px;
 border-bottom: solid 2px #333;
 border-right: solid 2px #333;
 position: absolute;
 right: 15px;
 top: 20px;
 -ms-transform: rotate(45deg);
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
 transition: rotate .3s;
}
.qa[open] summary::after{
	rotate: 180deg;
}
.qa summary::before{
 content: "";
 background: url(/img/jp/jp_q-icon.png) no-repeat;
 background-repeat: no-repeat;
 display: block;  
 width: 32px;
 height: 32px;
 position: absolute;
 left: 10px;
 top: 15px;
}
.qa p{
	padding: 0 10px 20px 50px;
	opacity: 0;
 position: relative;
}
.qa[open] p {
	opacity: 1;
	transition: 1s;
}
.qa p::before{
 content: "";
 background: url(/img/jp/jp_a-icon.png) no-repeat;
 background-repeat: no-repeat;
 display: block;  
 width: 32px;
 height: 32px;
 position: absolute;
 left: 10px;
 top: -5px;
}


/*ポップアップ*/
.popup_scroll img{
	display: block;
	margin: 15px auto;
}
.popup_scroll p:nth-child(1){
	font-size: 18px;
	font-weight: bold;
	border-left: solid 10px #DBBD94;
	padding-left: 5px;
	margin-bottom: 10px;
}
.popup_scroll .button-brown{
	margin-top: 10px;
}
#popup3 img, #popup7 img, #popup8 img{
	border: solid #c2c2c2 1px;
}
#popup3 ul, #popup5 ul{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 15px;
}
#popup3 li a, #popup5 ul:first-of-type a{
	display: block;
	text-align: right;
}
#popup5 li:nth-child(1){
	font-weight: bold;
}
#popup6 .popup_scroll img{
	width: 335px;
	height: auto;
}
#popup8 li p:not(.nav_btn){
	text-align: center;
}
#popup8 ul li:nth-child(3) img{
	width: 330px;
 	height: auto;
}


/*ナビ*/
#float-navi a{
	color: #fff;
	font-weight: bold;
	font-size: 16px;
	line-height: 1.5;
	position: fixed;
	bottom: 0;
	right: 90px;
	z-index: 10;
	text-align: center;
	background: #f98500;
	width: 200px;
	height: 50px;
	padding: 10px 20px;
	border-radius: 10px 10px 0 0;
	border: solid 5px #fff;
	border-bottom: none;
}
#float-navi a::before{
	content: "";
	background: url(/img/jp/jp_hakomaru-hyoko.png) no-repeat;
	display: block;
	width: 55px;
	height: 55px;
	background-size: 55px;
	position: absolute;
	top: -45px;
	left: 125px;
}