@charset "utf-8";
/*--------------------------------------
	copyright :　webcal
--------------------------------------*/

@import url(normalize.css);
@import url(common_parts.css);
@import url(common.css);


/*　index　==============================*/
section h2.sec_title { position: relative; margin-bottom: 10rem; padding: 1rem; font-size: 2.6rem; color: #fff; background: var(--base_color); }
section h2.sec_title::after { position: absolute; z-index: -1; bottom: -20px; left: 50%; content: ""; width: 0; height: 0; border-style: solid; border-width: 20px 20px 0 20px; border-color: var(--base_color) transparent transparent transparent; transform: translateX(-50%); }
section h3 { font-size: 2.2rem; }
section h4 { font-size: 2rem; }
section:not(#mv) { margin: 0 auto 5rem; }

.btn { width: 100%; max-width: 340px; margin: auto; }
.btn p { font-weight: bold; border: 1px solid var(--base_color); border-radius: 3px; }
.btn a { display: block; padding: 2rem; color: var(--base_color); }
.btn a:hover { color: #fff; opacity: 1; }
.btn a:hover { background: var(--base_color); }

@media screen and ( min-width: 769px ) {
	section:not(#mv) { margin: 0 auto 10rem; }
}

/* mv ----------*/
section#mv { margin-bottom: 10rem; }

/* pickup  ----------*/
/* product */
section#picup { margin: 0 auto 15rem; }
#pickup h2 { position: relative; margin-bottom: 10rem; font-size: 3rem; line-height: 1.4; }
#pickup h2 span { position: relative; display: inline-block; }
#pickup h2 span::before { content: ""; background: url(../_img/index/title-bg-left.png)no-repeat; background-size: contain; position: absolute; top: 50%; left: -2em; transform: translateY(-50%); display: block; width: 1.5em; height: 1.5em; }
#pickup h2 span::after { content: ""; background: url(../_img/index/title-bg-right.png)no-repeat; background-size: contain; position: absolute; top: 50%; right: -2em; transform: translateY(-50%); display: block; width: 1.5em; height: 1.5em; }
#pickup .product_box { position: relative; margin-bottom: 10rem; padding: 10rem 2rem; background: var(--base_color); transform: skew(0deg, 3deg); }
#pickup .product_inner { z-index: 1; display: block; width: 100%; max-width: 1120px; margin: 3rem auto 0; padding-left: 1rem; transform: skew(0deg, -3deg); }
#pickup .product_box.l_view { margin-right: 3rem; }
#pickup .product_box.r_view { margin-left: 3rem; }

#pickup .product_inner .rank_header { display: flex; margin-top: -10rem; margin-bottom: 5rem; align-items: center; }
#pickup .product_inner .rank_header .rank { width: 40%; }
#pickup .product_inner .rank_header .title { margin-left: 3rem; width: 100%; align-items: center; }
#pickup .product_inner .rank_header .title p { margin: 0; line-height: 1; }
#pickup .product_inner .rank_header .title h3 { font-size: 2.6rem; text-shadow: 3px 3px 4px #fff; }
#pickup .product_inner p { font-size: 3rem; font-weight: bold; }
#pickup .product_inner .text { margin-top: 45rem; }

#pickup .product_inner .price { text-align: center; }
#pickup .product_inner .price_text { margin: 5rem 0 0; background: #ff0000; padding: 3rem 0; border-radius: 7px; }
#pickup .product_inner .price_text > p { font-weight: bold; font-size: 6.5rem; color: #fff447; text-shadow: 4px 4px 5px #000; text-align: center; margin: 0; }
#pickup .product_inner .price_text p small { font-size: 2.4rem; line-height: 1.2; font-weight: bold; display: block; }
#pickup .product_inner .price_text .discount p { font-size: 4rem; line-height: 1.2; color: #fff447; text-shadow: 4px 4px 5px #000; }
#pickup .product_inner .price img { width: 100%; }



#pickup .product_inner .item_img { position: absolute; z-index: 1; top: 15rem; left: 50%; transform: translateX(-50%); width: auto; margin-left: 0; text-align: center; }

#pickup .rank_01 { background: rgb(241 130 0 / 100%); }
#pickup .rank_02 { background: rgb(241 130 0 / 50%); }
#pickup .rank_03 { background: rgb(241 130 0 / 30%); }
@media screen and ( min-width: 430px ) {
	#pickup .product_inner .price img { width: 70%; }
}
@media screen and ( min-width: 769px ) {
	#pickup h2 { font-size: 4rem; }
}
@media screen and ( min-width: 950px ) {
	#pickup .product_box.l_view { margin-right: 8vw; }
	#pickup .product_box.r_view { margin-left: 8vw; }
	#pickup .product_box { padding: 10rem; }
	#pickup .product_inner { padding-right: 3.8rem; }
	#pickup .product_inner .rank_header { display: flex; margin-top: -10rem; margin-bottom: 5rem; align-items: center; }
	#pickup .product_inner .rank_header .rank { width: auto; }
	#pickup .product_inner .rank_header .title { margin-left: 3rem; width: 100%; align-items: center; }
	#pickup .product_inner .rank_header .title p { margin: 0; line-height: 1; }
	#pickup .product_inner .rank_header .title h3 { font-size: 2vw; }
	#pickup .product_inner p { font-size: 1.4vw; }
	#pickup .product_inner .text { margin-top: auto; }
/*	#pickup .product_inner .price { text-align: left; }*/
	#pickup .product_inner .price p { font-size: 3.6vw; }
	#pickup .product_inner .price img { position: absolute; right: 0; width: 45%; display: none; }
	#pickup .product_inner .item_img { top: 0; right: 5vw; left: auto; transform: none; }
}
/* lineup */
#lineup { width: 100%; max-width: 1200px; margin: auto; }
#lineup .sec_inner { padding: 0 3rem; }
#lineup .product_header { margin-bottom: 3rem; }
#lineup .product_header ul.flb { display: flex; flex-wrap: wrap; }
#lineup .product_header ul.flb li { position: relative; background: var(--base_color); color: #fff; font-weight: bold; width: 200px; text-align: center; cursor: pointer; padding: 5px; }
#lineup .product_header ul.flb li:not(:nth-last-of-type(1)) { border-right: 1px solid; }
#lineup .product_header ul.flb li.active { background: #fff; color: #000; border-color: #fff; }
#lineup .product_header ul.flb li.active::after { content: ""; border: 3px solid var(--base_color); position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#lineup .product_list { padding: 0 2rem; }
#lineup .product_list h3 { border-bottom: 3px double var(--base_color); font-size: 2.4rem; margin-bottom: 2rem; }
#lineup .product_list .product_box { margin-bottom: 5rem; }
#lineup .product_box ul.flb { display: flex; flex-wrap: wrap; }
#lineup .product_box ul.flb li { position: relative; width: 100%; margin-bottom: 3rem; border: 3px solid var(--base_color); }
#lineup .product_box ul.flb li a { color: #000; }
#lineup .product_box ul.flb li .item_box .img_box,
#lineup .product_box ul.flb li .item_box .text_box { padding: 1rem; }
#lineup .product_box ul.flb li .item_box .obj_fit img { display: block; height: 200px; object-fit: contain; width: 100%; }
#lineup .product_box ul.flb li .item_box .price { font-weight: bold; font-size: 3.4rem; margin: 0.5rem 0; color: #FDF200; background: #FD000F; text-shadow: 1px 1px 2px black; width: calc(100% + 2rem); margin-left: -1rem; padding-right: 1rem; }
#lineup .product_box ul.flb li .item_box .price p { text-align: right; }
#lineup .product_box ul.flb li .discount { padding: 0.5rem; color: #FDF200; font-weight: bold; background: #FD000F; font-size: 2.4rem; text-shadow: 1px 1px 2px black; }
#lineup .product_box ul.flb li .model_info { font-size: 1.6rem; border-bottom: 1px solid var(--base_color); margin-bottom: 2rem; padding-bottom: 2rem; }
#lineup .product_box ul.flb li .model_info dl { display: flex; flex-wrap: wrap; font-size: 95%; }
#lineup .product_box ul.flb li .model_info dt::after { content:"："; }
#lineup .product_box ul.flb li:hover h3 { border-color: #fff; transition: .8s; }
#lineup .product_box ul.flb li:hover a { color: #fff; transition: .8s; opacity: 1; }
#lineup .product_box ul.flb li:hover .price p { color: #fff; transition: .8s; }
#lineup .product_box ul.flb li:hover .model_info { border-color: #fff; transition: .8s; }
#lineup .product_box ul.flb li:before { position: absolute; z-index: -1; top: 0; left: 0; content: ''; width: 100%; height: 0; background: var(--base_color); transition: .3s cubic-bezier(0.8, 0, 0.2, 1) .2s; }
#lineup .product_box ul.flb li:hover:before{ height: 100%; background-color:  var(--base_color); }
#lineup .product_list .maker_list { margin-bottom: 5rem; }
#lineup .product_list .maker_list .flb li { border: 3px solid var(--base_color); border-radius: 3px; margin-bottom: 3rem; text-align: center; transition: .5s; }
#lineup .product_list .maker_list .flb li a { display: block; padding: 1rem 2rem; font-weight: bold; color: var(--base_color); transition: .5s; }
#lineup .product_list .maker_list .flb li:hover { background: var(--base_color); transition: .5s; }
#lineup .product_list .maker_list .flb li a:hover { color: #fff; transition: .5s; opacity: 1; }
@media screen and ( min-width: 430px ) {
	#lineup .product_box ul.flb li { width: calc( (100% - 3rem) / 2 ); }
	#lineup .product_box ul.flb li:not(:nth-of-type(2n)) { margin-right: 3rem; }
	#lineup .product_list .maker_list ul { padding: 0 3rem; }
}
@media screen and ( min-width: 769px ) {
	#lineup .product_box ul.flb li { width: calc( (100% - 6rem) / 3 ); }
	#lineup .product_box ul.flb li:not(:nth-of-type(2n)) { margin-right: auto; }
	#lineup .product_box ul.flb li:not(:nth-of-type(3n)) { margin-right: 3rem; }
	#lineup .product_list .maker_list .flb { display: flex; flex-wrap: wrap; justify-content: center; }
	#lineup .product_list .maker_list .flb li { width: calc( (100% - 6rem) / 3 ); }
	#lineup .product_list .maker_list .flb li:not(:nth-last-of-type(1)) { margin-right: 3rem; }
}

/* contact */
#contact { width: 100%; max-width: 1200px; margin: auto; }
#contact .sec_inner { padding: 0 3rem; }
#contact .contact_wrap { padding: 0 2rem; }
#contact .contact_wrap .btn { margin: auto auto 0 auto; border: 2px solid var(--base_color); }
#contact .contact_wrap .btn p { border-radius: 0; transition: .3s; }
#contact .contact_wrap .btn a { background: var(--base_color); color: #fff; }
#contact .contact_type { margin-bottom: 3rem; }
#contact .contact_type > div { margin-bottom: 5rem; flex-direction: column; }
#contact .contact_type .form_area { border-bottom: 1px solid var(--base_color); padding-bottom: 5rem; }
#contact .contact_type .line_erea .btn p { background: var(--base_color); color: #fff; }
#contact .contact_type .line_erea .img_box { margin: 3rem; }
#contact .contact_type .line_erea span { display: block; padding: 2rem; cursor: pointer; }
#contact .contact_wrap .btn:hover a,
#contact .contact_wrap .btn:hover p { background: #fff; color: var(--base_color); transition: .3s; }
@media screen and ( min-width: 769px ) {
	#contact .contact_type { display: flex; margin-bottom: 3rem; }
	#contact .contact_type > div { display: flex; width: 50%; padding: 2rem 2rem 0; flex-direction: column; }
	#contact .contact_type .form_area { border-right: 1px solid var(--base_color); border-bottom: none; padding-bottom: 0; }
	#contact .contact_type .line_erea .img_box { margin: 3rem; }
}

/* voice */
#voice { width: 100%; max-width: 1200px; margin: auto; }
#voice .sec_inner { padding: 0 3rem; }
#voice .voice_list { padding: 0 2rem; }
#voice .voice_list p { color: #000; }
#voice .voice_list .star { margin: 1rem 0; font-weight: bold; font-size: 1.8rem; color: var(--base_color); }
#voice .voice_list .star + p { margin-bottom: 2rem; }
#voice .box_view { display: flex; margin-bottom: 10rem; flex-wrap: wrap; }
#voice .box_view .voice_box { position: relative; width: 100%; margin-bottom: 3rem; border: 3px solid var(--base_color); border-radius: 3px; }
#voice .box_view .voice_box h3 { font-size: 2rem; }
#voice .box_view .voice_box span { font-size: 1.8rem; }
#voice .box_view .voice_box ul.flb { display: flex; padding: 0 1rem; flex-wrap: wrap; }
#voice .box_view .voice_box a:hover { opacity: 1; }
#voice .box_view .voice_box:hover p { color: #fff; transition: 1s; }
#voice .box_view .voice_box:before { position: absolute; z-index: -1; top: 0; left: 0; content: ''; width: 100%; height: 0; background: var(--base_color); transition: .3s cubic-bezier(0.8, 0, 0.2, 1) .2s; }
#voice .box_view .voice_box:hover:before { height: 100%; background-color:  var(--base_color); }
#voice .box_view .voice_box .box_header { padding: 0.5rem; color: #fff; line-height: 1.5; background: var(--base_color); }
#voice .box_view .voice_box .box_header p { font-weight: bold; color: #fff; margin: 0; }
#voice .column_view ul { margin-bottom: 3rem; }
#voice .column_view .flb h3 { position: relative; margin-right: 3rem; color:  #000; }
#voice .column_view .flb h3::after{ content: ""; background: url(../_img/index/pen-to-square-solid.svg)no-repeat; width: 1em; height: 1em; background-size: contain; display: inline-block; margin-left: 0.5em; }
#voice .column_view .flb p { margin: 0 0 0 auto; }
#voice .column_view li { margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--base_color); }
#voice .img_box { position: relative; }
#voice .voice_list p.fukidashi { position: absolute; top: 15%; writing-mode: vertical-rl; background: var(--base_color); padding: 1rem; border-radius: 15px; color: #fff; }
#voice .voice_list p.fukidashi:after, #voice .voice_list p.hukidashi:before { top: 20%; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; }
#voice .voice_list p.fukidashi:after { border-color: rgba(136, 183, 213, 0); border-width: 12px; margin-top: -12px; }
#voice .voice_list p.fukidashi:before { border-color: rgba(194, 225, 245, 0); border-width: 12px; margin-top: -12px; }
#voice .voice_list p.fukidashi.left_pos { left: 1rem; }
#voice .voice_list p.fukidashi.right_pos { right: 1rem; }
#voice .voice_list p.fukidashi.left_pos:after, #voice .voice_list p.hukidashi.left_pos:before { left: 100%; }
#voice .voice_list p.fukidashi.left_pos:after  { border-left-color: var(--base_color); }
#voice .voice_list p.fukidashi.left_pos:before { border-left-color: #c2e1f5; }
#voice .voice_list p.fukidashi.right_pos:after, #voice .voice_list p.hukidashi.right_pos:before { right: 100%; }
#voice .voice_list p.fukidashi.right_pos:after { border-right-color: var(--base_color); }
#voice .voice_list p.fukidashi.right_pos:before { border-right-color: #c2e1f5; }
#voice .voice_list p.fukidashi span { text-combine-upright: all; line-height: 2; }
@media screen and ( min-width: 769px ) {
	#voice .box_view .voice_box { width: calc( (100% - 3rem) / 2 ); }
	#voice .box_view .voice_box:not(:nth-of-type(2n)) { margin-right: 3rem; }
	#voice .column_view .flb { display: flex; align-items: center; justify-content: space-between; }
}
@media screen and ( min-width: 1024px ) {
	#voice .box_view .voice_box { width: calc( (100% - 6rem) / 3 ); }
	#voice .box_view .voice_box:not(:nth-of-type(2n)) { margin-right: auto; }
	#voice .box_view .voice_box:not(:nth-of-type(3n)) { margin-right: 3rem; }
}

/* area */
#area { width: 100%; max-width: 1200px; margin: auto; }
#area .sec_inner { padding: 0 3rem; }
#area .area_info { padding: 0 2rem; }
#area dl { margin-bottom: 1rem; padding-bottom: 1rem; font-size: 2rem; border-bottom: 1px solid; }
#area dt { font-weight: bold; }
#area .text_box { margin-bottom: 5rem; }
#area .area_image { position: relative; width: 100%; height: 0; max-width: 440px; overflow: hidden; margin: 1em auto; padding-top: 67.27%; background: url("../_img/index/area.webp") center center /contain no-repeat; }
#area .area_image { padding-top: 296px; }
#area .area_image img { position: absolute; top: -40px; width: 11.6%; opacity: 0; }
#area .area_image img { opacity: 1; }
#area .area_image img.ashikaga { left: 42%; transition: top 0.2s 0.3s, opacity 0.2s 0.3s; }
#area .area_image img.ashikaga { top: 39%; }
#area .area_image img.maebashi { left: 24%; transition: top 0.2s 0.4s, opacity 0.2s 0.4s; }
#area .area_image img.maebashi { top: 34%; }
#area .area_image img.utsunomiya { left: 52%; transition: top 0.2s 0.7s, opacity 0.2s 0.7s; }
#area .area_image img.utsunomiya { top: 23%; }

/* qa */
#qa { width: 100%; max-width: 1200px; margin: auto; }
#qa .sec_inner { padding: 0 3rem; }
#qa .qa_list { padding: 0 2rem; }
#qa dl { margin-bottom: 3rem; }
#qa dt { position: relative; padding: 1rem 5rem 1rem 1rem; font-weight: bold; color: var(--base_color); cursor: pointer; border: 3px solid var(--base_color); border-radius: 2px; }
#qa dt::before { position: absolute; top: 1rem; left: 1rem; content: "Ｑ"; display: inline; width: 1em; height: 1em; margin-right: 1rem; }
#qa dt::after { position: absolute; top: 50%; right: 1rem; content: ""; width: 1em; height: 1em; font-weight: bold; background-image: url(../_img/index/angle-down-solid.svg); background-size: contain; background-position: center; background-repeat: no-repeat; transform: translateY(-50%); }
#qa dl.open dt::after { content: ""; background-image: url(../_img/index/angle-up-solid.svg); }
#qa dt p { padding-left: 1.5em; }
#qa dd { display: none; padding: 2rem; }
#qa dd p { position: relative; margin-left: 18vw; padding: 1rem; background: #e0edff; border-radius: 10px; }
#qa dd p::before { position: absolute; top: 5vw; left: -35px; content: ""; border: 20px solid transparent; border-right: 20px solid #e0edff; }
#qa dd .anser_wrap { content: ""; min-height: 150px; background: url(../_img/index/character.webp)no-repeat; background-position: left 0; background-size: 20%; }
@media screen and ( min-width: 769px ) {
    #qa dd .anser_wrap { min-height: 150px; background-size: 100px; }
    #qa dd p::before { top: 20px; }
    #qa dd p { margin-left: 12rem; }
}
/* company */
#company { width: 100%; max-width: 1200px; margin: auto; }
#company .sec_inner { padding: 0 3rem; }
#company .company_info { padding: 0 2rem; }
#company dl { margin-bottom: 3rem; padding-bottom: 3rem; border-bottom: 1px solid #e5e5e5; }
#company dt { margin-bottom: 1rem; font-weight: bold; }
#company dd { padding: 0 2rem; }
#company p.ac img { width: 70%; }
@media screen and ( min-width: 769px ) {
	#company ul.flb { display: flex; margin-top: 3rem; justify-content: center; align-items: center; }
	#company ul.flb li:not(:nth-last-of-type(1)) { margin-right: 5rem; }
	#company ul.flb .line img { width: 70%; }
	#company p.ac img { width: 50%; }
}

/* line_flow */
.pop_up,
.close_btn { display: none; }
.open_view{ overflow: hidden; }
.open_view .close_btn { display: block; position: fixed; z-index: 999; bottom: 0; width: 100%; height: 10rem; color: #fff; text-align: center; background: var(--base_color); cursor: pointer; }
.open_view .close_btn p { width: 100%; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.open_view .close_btn img { width: 7rem; }
.open_view #body-wrap::after { position: absolute; z-index: 1; top: 0; left: 0; content: ''; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); }
.open_view .pop_up { position: fixed; z-index: 99; top: 55%; left: 50%; display: block; width: 100%; height: 80%; max-width: 1200px; overflow: auto; margin: auto; background: #fff; transform: translate(-50%, -50%); }
.open_view #line_flow .sec_inner { padding: 2rem 2rem 5rem; }
.open_view #line_flow .flow_wrap { padding: 0 2rem; }
.flow_box { margin-bottom: 5rem; }
.flow_box h3 { margin-bottom: 3rem; padding: 2rem; color: #fff; text-align: center; background: var(--base_color); border-radius: 7px; }
.flow_box.flow_01 .flb li:nth-of-type(1) { border-bottom: 1px solid var(--base_color); margin-bottom: 5rem; }
.flow_box.flow_01 .flb h4 { margin-bottom: 5rem; color: var(--base_color); text-align: center; }
.flow_box.flow_01 .img_box { margin: 3rem 0; text-align: center; }
.flow_box.flow_02 .flb li { margin-bottom: 3rem; }
.flow_box.flow_02 .flb li p { margin: 0; color: #fff; text-align: center; background: var(--base_color); }
@media screen and ( min-width: 414px ) {
	.flow_box.flow_02 .flb { display: flex; flex-wrap: wrap; }
	.flow_box.flow_02 .flb li { width: calc( (100% - 3rem) / 2 ); }
	.flow_box.flow_02 .flb li:not(:nth-of-type(2n)) { margin-right: 3rem; }
}
@media screen and ( min-width: 769px ) {
	.open_view #line_flow .sec_inner { padding: 5rem 5rem 10rem; }
	.flow_box.flow_01 .flb { display: flex; }
	.flow_box.flow_01 .flb li { width: 50%; padding: 2rem; }
	.flow_box.flow_01 .flb li:nth-of-type(1) { border-right: 1px solid var(--base_color); border-bottom: none; margin-bottom: auto; }
	
	.flow_box.flow_02 .flb li { width: calc( (100% - 9rem) / 4 ); }
	.flow_box.flow_02 .flb li:not(:nth-of-type(2n)) { margin-right: auto; }
	.flow_box.flow_02 .flb li:not(:nth-of-type(4n)) { margin-right: 3rem; }
}


/* 補助金追加 */
.link_area ul li { border: 3px solid var(--base_color); border-radius: 7px; margin-bottom: 5rem; }
.link_area ul li a { color: var(--base_color); display: block; padding: 10px; font-weight: bold; text-align: center; }
@media screen and (min-width: 650px) {
	.link_area ul { display: flex; flex-wrap: wrap; justify-content: center; }
	.link_area ul li:not(:nth-last-of-type(1)) { margin-right: 5rem; }
}
#subsidy_box { width: 100%; max-width: 1100px; margin-bottom: 10rem; }
#subsidy_box .box_wrap { position: relative; border: 5px solid var(--base_color); padding: 3rem; }
#subsidy_box .box_wrap h2 { font-size: 2.4rem; position: absolute; top: -3.4rem; margin-left: -1rem; font-weight: bold; }
#subsidy_box .box_wrap h2 span { background: #fff; padding: 1rem; }
#subsidy_box .box_wrap h2::after { content: none; }
#subsidy_box .box_wrap p { font-size: 1.8rem; }

#subsidy_box .child .box_wrap { margin-bottom: 5rem; }
#subsidy_box .child .box_wrap h2 { color: var(--base_color); }
#subsidy_box .child .box_wrap h3 { font-weight: bold; font-size: 1.8rem; border-bottom: 2px solid var(--base_color); border-left: 5px solid var(--base_color); padding-left: 0.5em; }
#subsidy_box .child .box_wrap ol,
#subsidy_box .child .box_wrap p { margin: 2rem; }
#subsidy_box .child .box_wrap ol { padding-left: 2rem; }
#subsidy_box .child .box_wrap ol li { list-style: auto; }