@charset "utf-8";

body{
min-width: 1200px;
}
#main_visu{
text-align: center;
margin-top: 78px;
position: relative;
}
#main_visu .left_cont{
max-width: 570px;
width: 34%;
display: block;
margin: 100px auto 16px 12%;
}
#main_visu .image_cont{
width: 40%;
display: block;
position: absolute;
right: 12%;
top: 50%;
transform: translateY(-60%);
}
#main_visu.pc .firstview-slider{
width: 100%;
margin: 0px auto;
}
#main_visu.sp .firstview-slider{
width: 90%;
margin: 24px auto 0;
}
#main_visu.pc .firstview-slider .swiper-wrapper{
width: 100%;
max-width: 800px;
height: 500px;
position: relative;
}
#main_visu.sp .firstview-slider .swiper-wrapper{
position: relative;
height: 340px;
width: 100%;
}
.firstview-slider .swiper-slide{
width: 100%;
height: 100%;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.firstview-slider .swiper-image{
width: 100%;
height: 100%;
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
}
#main_visu .cost_txt{
color: #ffffff;
display: inline-block;
text-align: center;
letter-spacing: 0.1em;
position: relative;
padding: 0 24px;
font-size: 0.9em;
font-weight: bold;
}
#main_visu .cost_txt::before,
#main_visu .cost_txt::after{
content: '-';
display: block;
color: #ffffff;
position: absolute;
top: 0px;
}
#main_visu .cost_txt::before{
left: 0;
}
#main_visu .cost_txt::after{
right: 0;
}
#main_visu .price_list{
max-width: 570px;
width: 34%;
margin-left: 12%;
}
#main_visu .kakaku{
display: block;
margin-top: 32px;
width: 100%;
}
#main_visu .txt_pitch{
color: #ffffff;
display: inline-block;
margin-right: 32px;
}
#main_visu .kakaku_link{
display: inline-block;
width: 230px;
margin: 0 auto;
position: relative;
border-radius: 60px;
padding: 12px 0;
margin: 32px 0 0;
color: #ffffff;
background-color: #E9894A;
transition : all 0.2s ease 0s;
filter: drop-shadow(4px 4px 3px rgb(0, 0, 0, 0.2));
}
#main_visu .kakaku_link:hover{
background-color: #f0c7ad;
}
#main_visu .kakaku_link span{
display: inline-block;
}
#main_visu .kakaku_link .arrow{
display: block;
width: 10px;
position: absolute;
right: 24px;
top: 50%;
transform: translateY(-50%);
}
#main_visu .kakaku_link:hover .arrow{
animation: 0.2s ease 0s linkArrow;
}
#gradation{
display: block;
width: 100%;
padding: 24px 0 60px;
background: linear-gradient(to right, #0371BC, #0398BC);
}
#square{
display: block;
width: 56%;
height: 0;
padding-bottom: 56%;
background-color: #47BBFF;
opacity: 0.14;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(45deg);
} #main_visu.sp #slide_wrap{
height: 340px;
width: 90%;
margin: 24px auto 0;
}
#main_visu.sp #gradation{
padding: 135px 0 28px;
transform: translateY(-120px);
}
#main_visu.sp .kakaku{
width: 80%;
margin: 20px auto;
}
#main_visu .txt_pitch{
opacity: 0.8;
font-size: 0.9em;
}
#main_visu.sp .kakaku_link{
width: 80%;
} .index_works{
padding: 80px 0 0;
}
.index_works .images{
display: block;
width: 100%;
height: 0;
padding-bottom: 60%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
margin-bottom: 16px;
}
.index_works .swi_h3{
font-size: 1.1em;
margin-bottom: 8px;
letter-spacing: 0.05em;
}
.index_works .type{
background-color: #3077B7;
color: #ffffff;
padding: 4px 8px;
display: inline-block;
border-radius: 3px;
font-size: 0.9em;
}
.index_works .link_btn_wrap{
width: 90%;
max-width: 300px;
margin: 65px auto;
}
.index_works .txt_min{
font-size: 0.9em;
color: #777777;
margin: 12px 0 0;
}
.index_works .swiper_link{
display: block;
width: 100%;
transition : all 0.5s ease 0s;
padding: 12px 0 0;
}
.index_works .swiper_link:hover{
transform: translateY(-12px);
} #inquiry{
padding: 88px 0 0;
}
#inquiry .inquiry_wrap{
margin: 36px 0 0;
}
#inquiry .in_box{
display: inline-block;
width: -webkit-calc(100% / 3 - 52px);
width: -moz-calc(100% / 3 - 52px);
width: -ms-calc(100% / 3 - 52px);
width: calc(100% / 3 - 52px);
font-size: 0;
margin-bottom: 60px;
transition : all 0.2s ease 0s;
}
#inquiry .in_box:hover{
transform: translateY(-6px);
}
#inquiry .in_box:not(:nth-child(3n)){
margin-right: 72px;
}
#inquiry .left{
display: inline-block;
width: 47%;
font-size: 1rem;
padding-right: 16px;
box-sizing: border-box;
vertical-align: top;
}
#inquiry .thumb{
display: block;
width: 100%;
height: 0;
padding-bottom: 120%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#inquiry .right{
display: inline-block;
font-size: 1rem;
width: 53%;
vertical-align: top;
}
#inquiry .txt_wrap{
border-left: #3077B7 2px solid;
padding-left: 8px;
}
#inquiry .tag{
display: inline-block;
margin-left: 12px;
color: #ffffff;
font-weight: bold;
font-size: 0.8em;
padding: 6px 8px;
background-color: #777777;
position: relative;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
#inquiry .tag::before{
position: absolute;
display: block;
content: '';
top: 0;
left: -11px;
border-right: #777777 11px solid;
border-top: transparent 12px solid;
border-bottom: transparent 12px solid;
}
#inquiry .tag.news-category{background-color: #E88080;}
#inquiry .tag.achievement{background-color: #5B9AD1;}
#inquiry .tag.event{background-color: #DE9054;}
#inquiry .tag.news-category::before{border-right: #E88080 11px solid;}
#inquiry .tag.achievement::before{border-right: #5B9AD1 11px solid;}
#inquiry .tag.event::before{border-right: #DE9054 11px solid;}
#inquiry .title{
font-weight: bold;
line-height: 1.4;
font-size: 0.95em;
margin: 12px 0 8px;
}
#inquiry .date{
display: block;
font-size: 0.9em;
font-weight: bold;
color: #777777;
padding-bottom: 2px;
}
#inquiry .link_btn_wrap{
width: 90%;
max-width: 300px;
margin: 0px auto 40px;
}
#inquiry .mini{
font-size: 0.8em;
margin-top: 12px;
color: #777777;
line-height: 1.6;
} #reason{
background-color: #f2f2f2;
padding: 78px 0 0;
margin-top: 120px;
}
#reason .fadeinEfcJS{
z-index: 1;
position: relative;
}
#reason .title_weight{
font-weight: bold;
}
#reason .gray_h2{
font-size: 1.9em;
line-height: 1.6;
letter-spacing: 0.15em;
margin-bottom: 36px;
text-align: center;
}
#reason .gray_sub{
letter-spacing: 0.1em;
text-align: center;
}
#reason_gray{
position: relative;
}
#reason_gray ul{
padding: 64px 0 48px;
font-size: 0;
width: 95%;
margin: 66px auto 0;
display: flex;
position: relative;
z-index: 1;
}
#reason_gray li{
display: inline-block;
font-size: 1rem;
background-color: #ffffff;
position: relative;
width: calc(100% / 3 - 10px);
vertical-align: top;
padding-bottom: 36px;
box-shadow: 0 6px 36px rgba(0, 0, 0, 0.1);
}
#reason_gray li:not(:last-child){
margin-right: 16px;
}
#reason_gray .num{
position: absolute;
display: block;
width: 60px;
margin: 0 auto;
left: 50%;
top: -64px;
transform: translateX(-50%);
}
#reason_gray .img{
display: block;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-bottom: 44%;
}
#reason_gray .point_txt_area{
position: relative;
padding-top: 66px;
margin-top: 20px;
}
#reason_gray .point_title{
font-weight: bold;
text-align: center;
position: absolute;
width: 100%;
letter-spacing: 0.05em;
top: 0;
left: 0;
display: block;
text-align: center;
line-height: 1.6;
}
#reason_gray .desc{
width: 90%;
margin: 0 auto;
line-height: 1.8;
font-size: 0.9em;
}
#reason_gray .blue{
display: block;
width: 100%;
height: 128px;
position: absolute;
bottom: 0;
left: 0;
z-index: 0;
background-color: #2C497E;
}
#reason_blue{
background-color: #2C497E;
color: #ffffff;
padding: 44px 0 100px;
}
#reason_blue .title_weight{
font-weight: bold;
text-align: center;
margin-bottom: 40px;
}
#reason_blue .blue_h2{
letter-spacing: 0.15em;
margin-bottom: 28px;
font-size: 1.4em;
}
#reason_blue ul{
font-size: 0;
}
#reason_blue .cont{
width: calc(100% / 3 - 48px);
box-sizing: border-box;
display: inline-block;
font-size: 1rem;
vertical-align: top;
}
#reason_blue .plus{
display: inline-block;
width: 72px;
vertical-align: top;
}
#reason_blue .plus img{
display: block;
width: 28px;
margin: 80px auto 0;
}
#reason_blue .title{
text-align: center;
margin-bottom: 28px;
}
#reason_blue .title .num{
display: inline-block;
width: 54px;
vertical-align: middle;
filter: drop-shadow(4px 4px 3px rgb(0, 0, 0, 0.1));
}
#reason_blue .title .txt{
font-weight: bold;
line-height: 1.6;
vertical-align: middle;
display: inline-block;
text-align: left;
margin-left: 8px;
}
#reason_blue .desc{
font-size: 0.9em;
line-height: 1.8;
}
#product{
padding: 190px 0 0;
}
#product .big_h2{
margin: 0 0 48px;
}
#product .box_wrap{
display: flex;
flex-wrap: wrap;
margin: 200px auto 0;
}
#product .pro_box{
width: 46%;
background-color: #ffffff;
box-shadow: 0px 3px 14px rgba(0, 0, 0, 0.2);
border-radius: 6px;
padding: 140px 28px 36px;
margin-bottom: 64px;
box-sizing: border-box;
display: flex;
flex-direction: column;
position: relative;
}
#product .pro_box:nth-child(1),
#product .pro_box:nth-child(3){
margin-right: 8%;
}
#product .pro_box.margin1{
margin-bottom: 180px;
}
#product .pro_box.margin2{
margin-bottom: 110px;
}
#product .pro_title{
padding-bottom: 12px;
font-weight: bold;
display: block;
font-size: 0;
}
#product .pro_title .num{
width: 34px;
display: inline-block;
margin-right: 12px;
margin-bottom: 2px;
display: inline-block;
vertical-align: middle;
}
#product .pro_box:first-child .pro_title .num{
width: 32px;
}
#product .pro_title .pro_h3{
display: inline-block;
vertical-align: middle;
font-size: 1.4em;
}
#product .pro_title .kata{
font-size: 1.5em;
margin-right: 8px;
display: inline-block;
vertical-align: middle;
}
#product .left_txt_wrap{
display: inline-block;
font-size: 1rem;
width: calc(100% - 115px);
}
#product .right_txt_wrap{
display: inline-block;
font-size: 1rem;
width: 115px;
text-align: right;
border-left: #999999 1px dotted;
box-sizing: border-box;
}
#product .more{
display: inline-block;
font-weight: bold;
font-size: 0.9em;
color: #185790;
padding: 12px 0;
position: relative;
transition : all 0.2s ease 0s;
}
#product .more::before{
content: '';
display: block;
position: absolute;
top: 50%;
left: -20px;
transform: translateY(-50%);
border-left: #185790 8px solid;
border-top: transparent 6px solid;
border-bottom: transparent 6px solid;
transition : all 0.2s ease 0s;
}
#product .more:hover{
opacity: 0.6;
}
#product .more:hover::before{
left: -14px;
}
#product .catch{
color: #777777;
font-weight: bold;
font-size: 1.1em;
line-height: 1.6;
}
#product ul{
flex-grow: 1;
margin: 10px 0 0;
}
#product .pro_img{
position: absolute;
display: block;
width: 90%;
max-width: 325px;
top: 125px;
left: 50%;
transform: translate(-50%, -100%);
}
#product .pro_img.flex_img{
max-width: 220px;
}
#product .link_btn_wrap{
width: 90%;
max-width: 480px;
margin: 0 auto;
padding: 20px 0;
letter-spacing: 0.08em;
} #product .pro_box.ekishou{
width: 100%;
padding: 36px 28px 36px 40%;
}
#product .pro_box.ekishou .pro_img{
left: 36px;
top: 190px;
transform: translateY(-100%);
}
#product .pro_box.ekishou .new_tag{
font-size: 0.9rem;
font-weight: bold;
letter-spacing: 0.1em;
border: #185790 1px solid;
border-radius: 4px;
display: inline-block;
padding: 7px 6px;
text-align: center;
color: #185790;
vertical-align: middle;
margin-right: 8px;
} #price{
padding: 170px 0 0;
}
#price .price_wrap{
margin: 70px auto;
}
#price .price_box{
background-color: #f2f2f2;
border-radius: 6px;
width: calc(50% - 20px);
padding: 0 0 40px;
}
#price .price_box:first-child{
margin-right: 40px;
}
#price .title{
background-color: #185790;
color: #ffffff;
font-weight: bold;
font-size: 0;
padding: 16px 0;
text-align: center;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
min-height: 84px;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
#price .title_icon{
width: 60px;
display: inline-block;
vertical-align: middle;
margin-right: 24px;
}
#price .vision_h3{
display: inline-block;
vertical-align: middle;
font-size: 1rem;
text-align: left;
}
#price .txt_main{
font-size: 1.4em;
letter-spacing: 0.08em;
margin-bottom: 8px;
display: block;
}
#price .txt_sub{
font-size: 0.9em;
display: block;
}
#price .osusume{
font-size: 0.9em;
color: #777777;
font-weight: bold;
letter-spacing: 0.1em;
display: block;
text-align: center;
margin: 26px auto;
}
#price .osusume_ul{
width: 212px;
margin: 0 auto 16px;
}
#price .osusume_ul li{
padding: 12px 0;
padding-left: 26px;
position: relative;
font-size: 1.2em;
}
#price .osusume_ul li::before{
display: block;
position: absolute;
content: '';
border-left: #185790 10px solid;
border-top: transparent 7px solid;
border-bottom: transparent 7px solid;
left: 0;
top: 50%;
transform: translateY(-50%);
}
#price .osusume_ul a{
color: #E69354;
text-decoration: underline;
}
#price .case{
border-top: #cccccc 1px dashed;
padding-top: 32px;
width: 88%;
margin: auto auto 0;
text-align: center;
}
#price .txt1{
display: inline-block;
vertical-align: middle;
line-height: 1.6;
text-align: left;
}
#price .txt2{
display: inline-block;
vertical-align: middle;
margin-left: 32px;
font-size: 1.2em;
}
#price .case .num{
font-family: 'Segoe UI','Helvetica','Helvetica',sans-serif;
font-style: italic;
color: #E9A979;
font-size: 3em;
font-weight: 300;
margin: 0 8px;
}
#price .link_btn_wrap{
width: 90%;
max-width: 540px;
padding: 20px 0;
font-size: 1.3em;
} #rental{
padding: 200px 0 0;
}
#rental .ren_title {
font-weight: bold;
color: #1C4388;
text-align: center;
letter-spacing: 0.1em;
}
#rental .ren_title .min{
margin-bottom: 32px;
font-size: 1.4em;
display: block;
}
#rental .ren_title .main{
font-size: 2.5em;
display: block;
}
#rental .rental_wrap{
margin-top: 60px;
position: relative;
padding-top: 270px;
}
#rental .back_img{
display: block;
position: absolute;
width: 100%;
height: 350px;
left: 0;
top: 0;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
z-index: 0;
}
#rental_rel{
position: relative;
z-index: 1;
width: 600px;
margin: 0 auto;
}
#rental_rel ul{
font-size: 0;
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#rental_rel li{
font-size: 1rem;
display: inline-block;
vertical-align: top;
display: flex;
align-items: stretch;
flex-flow: column;
}
#rental_rel li:not(:last-child){
margin-right: 52px;
}
#rental_rel .ren_img{
display: block;
width: 126px;
margin: 0 auto 16px;
filter: drop-shadow(0px 2px 8px rgb(0, 0, 0, 0.2));
}
#rental_rel .ren_li_title{
color: #1C4388;
font-weight: bold;
text-align: center;
line-height: 1.8;
display: flex;
align-items: center;
height: 100%;
justify-content: center;
}
#rental_rel .ren_txt{
line-height: 1.8;
margin: 36px auto 44px;
}
#rental_rel .link_btn_wrap{
padding: 20px 0;
font-size: 1.2em;
} #flow{
background-color: #f2f2f2;
margin-top: 130px;
padding: 72px 0 90px;
}
#flow .big_h2{
color: #1C4388;
letter-spacing: 0.1em;
font-size: 2.3em;
}
#flow .flow_wrap{
box-sizing: border-box;
position: relative;
}
#flow .flow_line{
width: 1px;
height: calc(100% - 45px);
background-color: #185790;
position: absolute;
left: 62px;
top: 40px;
margin: 0;
background: linear-gradient(#6BAEEB, #185790);
}
#flow .shikaku{
display: block;
position: absolute;
width: 15px;
left: 56px;
bottom: 0;
}
#flow .flow_box{
padding-left: 165px;
box-sizing: border-box;
position: relative;
}
#flow .flow_num{
display: block;
width: 125px;
position: absolute;
left: 0;
top: 20px;
}
#flow .flow_num_sp{
display: none;
}
#flow .flow_h3{
font-weight: bold;
letter-spacing: 0.05em;
padding: 8px 0 8px 12px;
margin-bottom: 12px;
box-sizing: border-box;
font-size: 1.2em;
}
#flow .flow_box:nth-child(1) .flow_h3{border-left: #6BAEEB 8px solid;}
#flow .flow_box:nth-child(2) .flow_h3{border-left: #3077B7 8px solid;}
#flow .flow_box:nth-child(3) .flow_h3{border-left: #185790 8px solid;}
#flow .txt_area{
padding: 24px 0 36px;
line-height: 1.6;
}
#flow .flow_box:not(:last-child) .txt_area{
border-bottom: #cccccc 2px dashed;
}
#flow .txt{
background-color: #ffffff;
padding: 4px 20px;
box-sizing: border-box;
display: inline-block;
vertical-align: middle;
min-width: 240px;
text-align: center;
box-sizing: border-box;
font-size: 1.1em;
letter-spacing: 0.08em;
}
#flow .plus{
font-size: 1.5em;
display: inline-block;
margin: 0 8px;
vertical-align: middle;
}
#flow .orange{
color: #E9894A;
font-weight: bold;
font-size: 1.1em;
}
#flow .txt_p{
margin: 16px 0;
}
#flow .comment{
position: relative;
width: 320px;
margin: 0 auto;
}
#flow .comment .fuki{
width: 1px;
height: 36px;
background-color: #444444;
position: absolute;
bottom: 0;
}
#flow .comment .fuki.left{
left: 0;
transform: rotate(-35deg);
}
#flow .comment .fuki.right{
right: 0;
transform: rotate(35deg);
}
#flow .comment p{
text-align: center;
padding-bottom: 12px;
line-height: 1.6;
}
#flow .link_btn_wrap{
font-size: 1.2em;
font-weight: bold;
letter-spacing: 0.1em;
padding: 20px 0;
margin: 24px auto 32px;
width: 550px;
}
#flow .tel_wrap{
margin: 16px 0;
text-align: center;
font-family: 'Segoe UI','Helvetica','Helvetica',sans-serif;
font-style: italic;
}
#flow .tel_wrap span{
color: #1C4388;
display: inline-block;
vertical-align: middle;
text-align: left;
font-size: 1.7em;
}
#flow .tel_wrap a{
display: inline-block;
color: #E9894A;
font-size: 2.2em;
vertical-align: middle;
text-align: left;
}
#flow .min_txt{
font-size: 0.9em;
text-align: center;
}
#explain{
padding: 140px 0 0;
}
#explain .title_sub{
font-size: 1.6em;
letter-spacing: 0.1em;
text-align: center;
}
#explain .big_h2{
margin: 40px auto;
}
#explain .main_txt{
display: flex;
justify-content: center;
line-height: 1.6;
margin: 40px auto 72px;
}
#explain .point_ul{
width: 780px;
margin: auto;
}
#explain .point_ul .flex_row{
width: 25%;
}
#explain .point_img{
display: block;
filter: drop-shadow(0px 9px 6px rgb(0, 0, 0, 0.1));
width: 100%;
max-width: 125px;
margin: 0 auto;
}
#explain .point_txt{
font-weight: bold;
color: #185790;
text-align: center;
line-height: 1.6;
margin: 16px auto 0;
}
#ex_point .point_blue{
display: block;
width: 88px;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
#ex_point .ex_box{
padding-left: 90px;
box-sizing: border-box;
position: relative;
margin-bottom: 50px;
}
#ex_point .ex_box::before{
display: block;
content: '';
width: 2px;
height: calc(100% - 88px);
background-color: #185790;
position: absolute;
left: 44px;
top: 88px;
z-index: 0;
}
#ex_point .ex_box::after{
display: block;
content: '';
width: 12px;
height: 12px;
background-color: #185790;
border-radius: 50%;
position: absolute;
left: 39px;
bottom: 0;
margin: 0;
z-index: 1;
}
#ex_point .explain_h3{
font-weight: bold;
color: #185790;
font-size: 1.5em;
letter-spacing: 0.05em;
line-height: 1.6;
padding-left: 24px;
display: flex;
min-height: 88px;
align-items: center;
}
#ex_point .explain_h4{
display: block;
font-size: 1.2em;
font-weight: bold;
padding-left: 32px;
line-height: 1.6;
position: relative;
margin: 32px 0 16px;
}
#ex_point .explain_h4::before{
display: block;
content: '';
position: absolute;
width: 16px;
height: 16px;
border: #185790 3px solid;
box-sizing: border-box;
border-radius: 50%;
top: 50%;
left: 0;
transform: translateY(-50%);
}
#ex_point .explain_h4::after{
display: block;
position: absolute;
content: '';
width: 45px;
height: 1px;
background-color: #444444;
left: -45px;
top: 50%;
transform: translateY(-50%);
}
#ex_point .illu{
border: #185790 1px dashed;
border-radius: 6px;
padding: 24px;
padding-left: 40px;
box-sizing: border-box;
margin: 20px auto 36px;
}
#ex_point .illu1{
display: inline-block;
vertical-align: middle;
}
#ex_point .illu1.denkyuu{
width: 54px;
margin-right: 24px;
}
#ex_point .illu1.monitor{
width: 64px;
margin-right: 48px;
}
#ex_point .illu_box{
display: inline-block;
vertical-align: middle;
}
#ex_point .txt1{
font-weight: bold;
font-size: 1.2em;
text-align: center;
letter-spacing: 0.1em;
color: #185790;
}
#ex_point .txt2{
font-weight: bold;
text-align: center;
color: #185790;
}
#ex_point .txt3{
font-size: 0.9em;
font-weight: bold;
text-align: center;
color: #185790;
margin: 12px auto 0;
}
#ex_point .yaku{
display: block;
height: 42px;
width: auto;
margin: 28px auto 0;
}
#ex_point .ex_arrow{
display: inline-block;
width: 28px;
vertical-align: middle;
margin: 0 40px;
}
#ex_point .gray_line{
display: inline-block;
width: 1px;
height: 80px;
background-color: #cccccc;
border: none;
margin: 0 40px;
vertical-align: middle;
}
#ex_point .normal_txt{
line-height: 1.6em;
color: #444444;
}
#ex_point .waku{
background-color: #f2f2f2;
padding: 16px;
box-sizing: border-box;
line-height: 1.6em;
font-size: 0.9em;
margin: 16px auto 0;
}
#ex_point .ex_img{
display: inline-block;
width: auto;
height: auto;
max-width: 100%;
max-height: 320px;
margin: 32px 16px 40px;
vertical-align: top;
}
#kihon{
padding: 160px 0 0;
}
#kihon .kihon_box{
padding: 52px 88px;
margin: 48px auto 0;
box-sizing: border-box;
background-color: #f2f2f2;
}
#kihon .box_title{
font-size: 1.5em;
font-weight: bold;
text-align: center;
border-bottom: #aaaaaa 1px dashed;
padding: 0 0 36px;
}
#kihon .wrap{
font-size: 0;
line-height: 1.6;
margin: 32px auto 0;
display: flex;
}
#kihon .left{
display: inline-block;
width: calc(100% - 330px);
font-size: 1rem;
padding-right: 92px;
box-sizing: border-box;
vertical-align: top;
}
#kihon .right{
display: inline-block;
width: 330px;
font-size: 1rem;
font-weight: bold;
vertical-align: top;
}
#kihon .right.waku{
border: #aaaaaa 1px solid;
padding: 32px 0 0;
}
#kihon .right .white{
background-color: #ffffff;
padding: 8px 0;
text-align: center;
font-size: 1.2em;
}
#kihon .right .kigou{
display: block;
text-align: center;
margin: 4px auto;
font-size: 1.5em;
}
#kihon .right .equal{
transform: rotate(90deg);
}
#kihon .right .bold1{
font-size: 1.3em;
text-align: center;
}
#kihon .right .bold2{
display: flex;
justify-content: center;
}
#kihon .right img{
display: block;
width: 100%;
}
#kihon .right .txt_margin{
margin: 24px 0 0;
}
#choice{
padding: 100px 0 0;
}
#choice .txt_blue{
color: #185790;
font-weight: bold;
font-size: 1.4em;
letter-spacing: 0.1em;
margin: 64px auto 24px;
display: flex;
justify-content: center;
}
#choice .txt_gray{
color: #777777;
font-weight: bold;
display: flex;
justify-content: center;
}
#choice .wrap{
margin: 64px auto 0;
text-align: center;
}
#choice .box{
display: inline-block;
box-sizing: border-box;
text-align: left;
}
#choice .box:first-child{
border-right: #777777 1px solid;
padding-right: 100px;
}
#choice .box:last-child{
padding-left: 100px;
}
#choice .box img{
width: 205px;
display: block;
margin: 0 auto 52px;
padding-left: 48px;
}
#choice .kyori{
font-size: 1.8em;
font-weight: bold;
letter-spacing: 0.1em;
color: #185790;
display: flex;
justify-content: center;
}
#choice .toki{
font-weight: bold;
letter-spacing: 0.1em;
color: #185790;
display: flex;
justify-content: center;
margin: 16px auto 0;
}
#choice .box .list_plus_ul{
margin-top: 16px;
}
#choice .p_wrap{
text-align: center;
margin: 64px auto 0;
}
#choice .normal_p{
display: inline-block;
text-align: left;
}
#omakase{
padding: 110px 0 0;
}
#omakase .main_p{
margin: 44px auto;
width: 80%;
}
#omakase .omakase_h3{
color: #185790;
font-weight: bold;
font-size: 1.2em;
display: block;
text-align: center;
}
#omakase .omakase_h3::after{
content: '';
display: block;
width: 115px;
height: 1px;
background-color: #185790;
border: none;
margin: 36px auto;
}
#omakase .row2_res1_flex{
border: #185790 2px solid;
border-radius: 6px;
padding: 48px 24px;
width: calc(50% - 26px);
}
#omakase .row2_res1_flex:first-child{
margin-right: 52px;
}
#omakase .box_p{
margin: 0 0 32px;
}
#omakase .omakase_link{
margin: auto 0 0;
padding: 16px 0;
}
#foot_works{
padding: 120px 0 0;
}
#foot_works .waku{
background-color: #f2f2f2;
padding: 16px;
box-sizing: border-box;
line-height: 1.6em;
font-size: 0.9em;
margin: 16px auto 0;
}
#foot_works .normal_p{
margin: 72px auto 24px;
}
#foot_works .swiper-container{
margin: 72px auto 44px;
} #special{
padding: 120px 0 100px;
}
#special .spe_wrap{
margin: 52px auto 0;
}
#special .spe_box{
padding: 12px 16px 0;
transition : all 0.2s ease 0s;
}
#special .spe_box:hover{
transform: translateY(-12px);
}
#special .images{
display: block;
width: 100%;
height: 0;
padding-bottom: 60%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
#special .date{
font-size: 0.9em;
color: #777777;
letter-spacing: 0.1em;
margin: 16px 0 8px;
display: block;
}
#special .spe_title{
letter-spacing: 0.1em;
line-height: 1.6;
font-weight: bold;
}
#special .link_btn_wrap{
width: 90%;
max-width: 300px;
margin-top: 48px;
}
@media screen and (max-width: 1500px){
#main_visu .image_cont{
right: 8%;
}
#main_visu .left_cont{
margin: 100px auto 16px 8%;
}
#main_visu .price_list{
margin-left: 8%;
}
#square{
width: 70%;
padding-bottom: 70%;
}
}
@media screen and (max-width: 1200px){
#product .pro_box{
width: 48%;
}
#product .pro_box:nth-child(1),
#product .pro_box:nth-child(3){
margin-right: 4%;
}
}
@media screen and (max-width: 768px){ body{
min-width: auto;
} #main_visu{
margin-top: 20px;
} .index_works{
padding: 0;
}
.index_works .swiper-container{
margin-top: 24px;
} #inquiry{
padding: 40px 0 0;
}
#inquiry .inquiry_wrap{
margin: 32px 0;
} #rental_rel{
width: 100%;
} #flow .link_btn_wrap{
width: 90%;
} #inquiry .in_box{
width: 100%;
margin-bottom: 32px;
}
#inquiry .in_box:not(:nth-child(3n)){
margin-right: 0;
} #reason .gray_h2{
margin-bottom: 24px;
}
#reason_gray ul{
display: block;
margin: 48px auto 0;
padding: 0px 0 48px;
}
#reason_gray li{
margin-top: 94px;
width: 100%;
}
#reason_gray li:not(:last-child){
margin-right: 0;
}
#reason_gray .num{
width: 44px;
top: -52px;
}
#reason_blue .cont{
width: 100%;
}
#reason_blue .plus{
display: block;
margin: 24px auto 32px;
width: 100%;
}
#reason_blue .plus img{
margin: 0 auto;
} #product{
padding: 120px 0 0;
}
#product .box_wrap{
margin: 135px auto 0;
}
#product .pro_box,
#product .pro_box.ekishou{
width: 100%;
padding: 140px 28px 36px;
margin-bottom: 40px;
}
#product .left_txt_wrap{
width: 100%;
}
#product .right_txt_wrap{
width: 100%;
font-size: 1rem;
border-left: none;
}
#product .pro_img,
#product .pro_box.ekishou .pro_img{
top: 110px;
left: 50%;
transform: translate(-50%, -100%);
}
#product .pro_box.margin2{
margin-bottom: 180px;
} #price{
padding: 110px 0 0;
}
#price .price_wrap{
margin: 52px 0;
}
#price .price_box{
width: 100%;
margin: 0 0 48px;
padding: 0 0 28px;
}
#price .case{
padding-top: 8px;
} #rental{
padding: 120px 0 0;
}
#rental .rental_wrap{
margin-top: 48px;
}
#rental .ren_title .main{
font-size: 1.8em;
}
#rental .ren_title .min{
margin-bottom: 22px;
}
#rental .back_img{
height: 300px;
}
#rental_rel .ren_img{
width: 80px;
}
#rental_rel .ren_li_title{
font-size: 0.8em;
}
#rental_rel li:not(:last-child){
margin-right: 12px;
}
#rental_rel .ren_txt{
width: 90%;
} #flow .big_h2{
font-size: 1.8em;
}
#flow .flow_num{
width: 74px;
display: none;
}
#flow .flow_num_sp{
display: inline-block;
width: 74px;
vertical-align: middle;
}
#flow .txt_area{
padding: 40px 0 48px;
}
#flow .shikaku{
display: none;
}
#flow .flow_line{
display: none;
}
#flow .flow_box{
padding-left: 0;
}
#flow .flow_h3{
width: calc(100% - 80px);
display: inline-block;
vertical-align: middle;
padding-left: 12px;
box-sizing: border-box;
margin: 0;
font-size: 1.3em;
}
#flow .flow_box:nth-child(1) .flow_h3{
border: none;
}
#flow .flow_box:nth-child(2) .flow_h3{
border: none;
}
#flow .flow_box:nth-child(3) .flow_h3{
border: none;
}
#flow .txt{
display: block;
font-weight: bold;
font-size: 0.9em;
letter-spacing: normal;
min-width: auto;
width: 100%;
padding: 8px 20px;
}
#flow .plus_wrap{
margin: 24px 0;
}
#flow .plus{
font-weight: bold;
display: block;
text-align: center;
} #explain .point_ul{
width: 100%;
}
#explain .big_h2{
margin: 24px auto;
}
#explain .title_sub{
font-size: 1.2em;
}
#explain .point_txt{
font-size: 0.8em;
margin: 40px auto 64px;
}
#explain .point_img{
max-width: 72px;
}
#ex_point .point_blue{
width: 72px;
}
#ex_point .explain_h3{
padding-left: 88px;
font-size: 1.3em;
min-height: 72px;
}
#ex_point .ex_box{
padding-left: 0;
margin-bottom: 72px;
}
#ex_point .ex_box::before{
display: none;
}
#ex_point .ex_box::after{
display: none;
}
#ex_point .explain_h4{
padding-left: 24px;
margin: 20px 0 12px;
}
#ex_point .explain_h4::after{
display: none;
}
#ex_point .ex_arrow{
display: block;
margin: 32px auto 28px;
transform: rotate(90deg);
}
#ex_point .illu_box{
display: block;
}
#ex_point .illu{
padding: 24px 16px;
margin: 28px auto 36px;
}
#ex_point .illu1{
display: none;
}
#ex_point .illu1.denkyuu{
width: 42px;
margin-right: 24px;
}
#ex_point .illu1.monitor{
width: 52px;
margin-right: 24px;
}
#ex_point .yaku{
height: 32px;
margin: 12px auto 0;
}
#ex_point .ex_img{
margin: 20px auto;
}
#ex_point .gray_line{
height: 1px;
width: 100%;
margin: 24px 0;
display: block;
} #kihon{
padding: 80px 0 0;
}
#kihon .kihon_box{
padding: 40px 16px;
}
#kihon .box_title{
font-size: 1.2em;
line-height: 1.4;
}
#kihon .wrap{
display: block;
}
#kihon .left{
width: 100%;
display: block;
padding: 0;
margin-bottom: 32px;
}
#kihon .right{
width: 100%;
}
#kihon .right.waku{
padding: 24px 0 32px;
} #choice .txt_gray{
line-height: 1.4;
}
#choice .wrap{
margin: 32px auto 0;
}
#choice .box{
width: 100%;
}
#choice .box:first-child{
border: none;
border-bottom: #777777 1px dashed;
padding: 48px 0 24px;
}
#choice .box:last-child{
padding: 48px 0 24px;
}
#choice .box img{
margin: 0 auto 36px;
}
#choice .kyori{
font-size: 1.6em;
}
#choice .toki{
margin: 16px 0;
}
#choice .p_wrap{
margin: 32px auto 0;
} #omakase .main_p{
width: 100%;
margin: 36px auto;
}
#omakase .row2_res1_flex{
padding: 40px 24px;
width: 100%;
}
#omakase .row2_res1_flex:first-child{
margin-right: 52px;
margin-bottom: 48px;
}
#omakase .omakase_h3::after{
margin: 24px auto 40px;
}
#omakase .omakase_link{
margin: 0 auto;
} #foot_works .normal_p{
margin: 40px auto 24px;
}
#foot_works .index_works .link_btn_wrap{
margin: 40px auto 0;
} #special{
padding: 56px 0 100px;
}
#special .spe_box{
width: 100%;
padding: 0;
}
#special .spe_box:not(:last-child){
margin-bottom: 52px;
}
}
@media screen and (max-width : 540px){
#flow .comment{
width: 90%;
}
#choice .midium_p{
font-size: 1em;
}
#choice .txt_blue{
letter-spacing: normal;
} #explain .point_ul{
margin: 0 0 52px;
}
#explain .point_ul .flex_row{
width: 50%;
}
#explain .point_img{
max-width: 100px;
}
#explain .point_txt{
margin: 10px auto 24px;
}
}