@charset "UTF-8"; .clearfix { zoom: 1; clear: both; } .clearfix:after { content: "."; display: block; visibility: hidden; height: 0; clear: both; } .pc_only { display: block; } .sp_only { display: none; } .pc_only2 { display: inline-block; } .sp_only2 { display: none; } @media screen and (max-width: 630px) { .pc_only { display: none; } .sp_only { display: block; } .pc_only2 { display: none; } .sp_only2 { display: inline-block; } } .onmouse { -webkit-transition: all .4s ease-out; transition: all .4s ease-out; } .onmouse:hover { opacity: 0.6; } .ftContent *, .ftContent:before, .ftContent:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .ftContent { width: 100%; min-width: 1052px; position: relative; } .sub_nav { width: 100%; min-width: 1072px; background-color: #333333; color: #fff; height: 41px; text-align: right; font-size: 11px; line-height: 12px; padding: 0 10px 0 0; } .sub_nav nav ul { list-style: none; } .sub_nav ul li { list-style: none; } .sub_nav.sub_nav__on { position: fixed; top: 0; z-index: 999; } .sub_nav ul { max-width: 1200px; min-width: 1052px; margin: 0 auto; padding-top: 13px; } .sub_nav li { display: inline-block; padding: 0 1em; border-right: 1px solid #ddd; } .sub_nav li i { font-size: 14px; display: inline-block; vertical-align: -1px; } .sub_nav li a { color: #fff; } .sub_nav li:last-child { padding: 0 0em 0 1em; border-right: 0px solid #ddd; } #mainphoto { width: 100%; min-width: 1300px; height: 700px; position: relative; overflow: hidden; text-align: right; } #mainphoto.mainphoto__on { margin-top: 41px; } #mainphoto div.photo { height: 700px; position: absolute; top: 0; right: 0; transform: scale(1); } #mainphoto div.photo img { height: 700px; } #mainphoto .other_contena { width: 1120px; margin: 0 auto; height: 700px; position: relative; } #mainphoto h1 { position: absolute; left: 0%; top: 62px; width: 439px; overflow: hidden; } #mainphoto h1 .mask { position: absolute; top: 0; width: 200%; left: -98%; height: 100%; -webkit-transition: all 1.2s ease-out; transition: all 1.2s ease-out; } #mainphoto h1 .mask img { width: 100%; height: 100%; } #mainphoto h1 .mask__on { left: 100%; } #mainphoto h2 { position: absolute; left: 0%; top: 62px; width: 439px; overflow: hidden; } #mainphoto h2 .mask { position: absolute; top: 0; width: 200%; left: -98%; height: 100%; -webkit-transition: all 1.2s ease-out; transition: all 1.2s ease-out; } #mainphoto h2 .mask img { width: 100%; height: 100%; } #mainphoto h2 .mask__on { left: 100%; } #mainphoto div.fftext { position: absolute; left: 0%; top: 334px; font-size: 14px; line-height: 190%; text-align: left; overflow: hidden; } #mainphoto div.fftext .mask2 { position: absolute; top: 0; width: 200%; left: -98%; height: 100%; -webkit-transition: all 1.2s ease-out; transition: all 1.2s ease-out; } #mainphoto div.fftext .mask2 img { width: 100%; height: 100%; } #mainphoto div.fftext .mask__on { left: 100%; } .list_top.list_top__on { margin-top: 41px; } .left_text { position: fixed; left: 3%; top: 55%; width: 10px; -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); -webkit-transition: all .4s ease-out; transition: all .4s ease-out; z-index: 9999; } @media screen and (max-width: 1400px) { .left_text { left: 20px; } } .left_text img { width: 10px; } div.botan_contena { position: absolute; left: 0%; top: 560px; width: 555px; display: flex; justify-content: space-between; } div.botan_contena.normal { position: relative; left: auto; top: auto; margin: 0 auto; } div.botan_contena .botan__blue { width: 48%; position: relative; background-color: #0E2E9D; text-align: center; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4); overflow: hidden; } div.botan_contena .botan__blue::before { position: absolute; content: ""; height: 1px; width: 100%; background-color: #fff; z-index: 2; top: 3px; left: 0; } div.botan_contena .botan__blue::after { position: absolute; content: ""; height: 1px; width: 100%; background-color: #fff; z-index: 2; bottom: 3px; left: 0; } div.botan_contena .botan__blue a { color: #fff; padding: 22px 0; display: inline-block; width: 100%; height: 100%; font-size: 17px; line-height: 100%; } div.botan_contena .botan__blue a:hover { opacity: 1 !important; } div.botan_contena_one { position: relative; width: 262px; margin: 0 auto; } div.botan_contena_one .botan__blue { width: 100%; position: relative; background-color: #0E2E9D; text-align: center; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4); } div.botan_contena_one .botan__blue::before { position: absolute; content: ""; height: 1px; width: 100%; background-color: #fff; z-index: 2; top: 3px; left: 0; } div.botan_contena_one .botan__blue::after { position: absolute; content: ""; height: 1px; width: 100%; background-color: #fff; z-index: 2; bottom: 3px; left: 0; } div.botan_contena_one .botan__blue a { color: #fff; padding: 22px 0; display: inline-block; width: 100%; height: 100%; font-size: 17px; line-height: 100%; } div.botan_contena_one .botan__blue a:hover { opacity: 1 !important; } div.botan_contena_form { position: absolute; left: 0%; top: 560px; width: 555px; display: flex; justify-content: space-between; } div.botan_contena_form.normal { position: relative; left: auto; top: auto; margin: 0 auto; } div.botan_contena_form .botan__blue { width: 48%; position: relative; background-color: #fff; text-align: center; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4); overflow: hidden; color: #000; } div.botan_contena_form .botan__blue i { font-size: 16px; } div.botan_contena_form .botan__blue::before { position: absolute; content: ""; height: 1px; width: 100%; background-color: #000; z-index: 2; top: 3px; left: 0; } div.botan_contena_form .botan__blue::after { position: absolute; content: ""; height: 1px; width: 100%; background-color: #000; z-index: 2; bottom: 3px; left: 0; } div.botan_contena_form .botan__blue a { color: #000; padding: 22px 0; display: inline-block; width: 100%; height: 100%; font-size: 17px; line-height: 100%; } div.botan_contena_form .botan__blue a:hover { opacity: 1 !important; color: #fff; } div.botan_contena_form .botan__blue:hover::before { background-color: #fff; } div.botan_contena_form .botan__blue:hover::after { background-color: #fff; } #section01 { width: 100%; background-color: #333333; color: #fff; padding: 150px 0; position: relative; overflow: hidden; } #section01 img { width: 100%; } #section01 .wide_contena { width: 100%; position: relative; margin-bottom: 100px; } #section01 .wide_contena .wideimg { width: 58.3%; } #section01 .wide_contena .moji_1f { position: absolute; right: -5px; width: 12.7%; top: 50%; -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); } #section01 .bodytext { width: 466px; position: absolute; left: 54%; top: 50%; -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); } #section01 .bodytext h3 { width: 100%; padding-bottom: 24px; } #section01 .bodytext p { font-size: 14px; line-height: 200%; padding-bottom: 30px; } #section01 .bodytext .more_item { width: 220px; margin: 0 auto; overflow: hidden; position: relative; background-color: #fff; text-align: center; } #section01 .bodytext .more_item a { color: #000; padding: 22px 0 19px 0; display: inline-block; width: 100%; height: 100%; font-size: 14px; font-weight: bold; line-height: 100%; } #section01 .bodytext .more_item a:hover { color: #fff; opacity: 1 !important; } #section01 .bodytext .more_item a:hover > span.next_yaji { display: none; } #section01 .bodytext .more_item a:hover > span.next_yaji_w { display: inline-block; } #section01 .bodytext .more_item span { display: inline-block; } #section01 .bodytext .more_item span.next_yaji { width: 32px; display: inline-block; margin-left: 10px; vertical-align: -2px; } #section01 .bodytext .more_item span.next_yaji_w { width: 32px; display: inline-block; margin-left: 10px; vertical-align: -2px; display: none; } #section01 .bodytext .more_item div.kado { width: 10px; position: absolute; top: -1px; right: -1px; } /****白と黒のスライド**/ .white_futa { position: absolute; width: 100%; height: 100%; top: 0; left: 0%; background-color: #fff; -webkit-transition: all 0.8s ease-out; transition: all 0.8s ease-out; } .white_futa__on { left: 100%; } .black_futa { position: absolute; width: 100%; height: 100%; top: 0; left: 0%; background-color: #333333; -webkit-transition: all 0.8s ease-out; transition: all 0.8s ease-out; } .black_futa__on { left: 100%; } #section02 { width: 100%; background-color: #fff; color: #333; padding: 150px 0; position: relative; overflow: hidden; } #section02 img { width: 100%; } #section02 .wide_contena { width: 100%; position: relative; margin-bottom: 100px; } #section02 .wide_contena .wideimg { width: 58.3%; margin-left: auto; } #section02 .wide_contena .moji_2f { position: absolute; left: -5px; width: 12.7%; top: 50%; -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); } #section02 .bodytext { width: 466px; position: absolute; left: 46%; top: 50%; -webkit-transform: translate(-100%, -50%); transform: translate(-100%, -50%); } #section02 .bodytext h3 { width: 100%; padding-bottom: 24px; } #section02 .bodytext p { font-size: 14px; line-height: 200%; padding-bottom: 30px; color: #333; } #section02 .bodytext .more_item { width: 220px; margin: 0 auto; overflow: hidden; position: relative; background-color: #000; text-align: center; } #section02 .bodytext .more_item a { color: #fff; padding: 22px 0 19px 0; display: inline-block; width: 100%; height: 100%; font-size: 14px; font-weight: bold; line-height: 100%; } #section02 .bodytext .more_item a:hover { color: #fff; opacity: 1 !important; } #section02 .bodytext .more_item a:hover > span.next_yaji { display: none; } #section02 .bodytext .more_item a:hover > span.next_yaji_w { display: inline-block; } #section02 .bodytext .more_item span { display: inline-block; } #section02 .bodytext .more_item span.next_yaji { width: 32px; display: inline-block; margin-left: 10px; vertical-align: -2px; } #section02 .bodytext .more_item span.next_yaji_w { width: 32px; display: inline-block; margin-left: 10px; vertical-align: -2px; display: none; } #section02 .bodytext .more_item div.kado { width: 10px; position: absolute; top: -1px; right: -1px; } ul.item3clum { width: 94%; max-width: 1100px; margin: 0 auto 80px auto; padding: 0; display: flex; justify-content: space-between; list-style: none; } ul.item3clum li { width: 30%; list-style: none; } #section03 { width: 100%; background-color: #333333; color: #fff; padding: 150px 0; position: relative; } #section03 h3 { text-align: center; font-size: 28px; letter-spacing: 0.15em; } #section03 .calender_contena_all { width: 100%; max-width: 1100px; margin: 0 auto; background-color: #fff; position: relative; } #section03 .calender_contena { width: 94%; max-width: 1072px; margin: 0px auto; } #section03 .gc-wrap { width: 50%; float: left; max-width: 800px; margin: 0 0% 0 0; } #section03 .g-calendar { position: relative; overflow: hidden; height: 0; padding-bottom: 90%; } #section03 .g-calendar iframe { position: absolute; top: 0; left: 3%; width: 94%; height: 94%; } #section03 .calendar_bt { margin-top: 60px; padding-bottom: 100px; } #section03 .cl_waku { width: 94%; margin: 0 auto 50px auto; border-bottom: 1px solid #CBCBCB; display: table; color: #000; font-size: 16px; } #section03 .cl_waku dt { display: table-cell; width: 12%; padding: 20px 0 0 3em; } #section03 .cl_waku dd { display: table-cell; width: 88%; padding: 15px 0 15px 3em; } #section03 .cl_waku_first { width: 94%; margin: 0 auto 0px auto; padding-top: 80px; border-bottom: 1px solid #CBCBCB; } #section04 { width: 100%; background-color: #fff; color: #000; padding: 150px 0; position: relative; } #section04 h3 { text-align: center; font-size: 28px; letter-spacing: 0.15em; position: relative; color: #333; } #section04 .google_contena { width: 100%; position: relative; } #section04 .google_contena iframe { width: 100%; height: 450px; } #section04 .cl_waku { width: 94%; max-width: 1000px; margin: 0 auto 0px auto; border-bottom: 1px solid #CBCBCB; display: table; color: #000; font-size: 16px; font-size: 16px; } #section04 .cl_waku dt { display: table-cell; width: 12%; padding: 20px 0 0 3em; } #section04 .cl_waku dd { display: table-cell; width: 88%; padding: 15px 0 15px 3em; line-height: 180%; } #section04 .cl_waku_first2 { width: 94%; margin: 0 auto 0px auto; padding-top: 40px; border-bottom: 1px solid #CBCBCB; } #section05 { width: 100%; background-color: #333333; color: #fff; padding: 150px 0; position: relative; } #section05 h3 { text-align: center; font-size: 28px; letter-spacing: 0.15em; } #section05 .contact_contena { width: 94%; max-width: 1000px; margin: 40px auto 0px auto; border-top: 1px solid #fff; padding: 25px 0; } #section05 .contact_contena .contact_contena__in { max-width: 732px; margin: 0 auto; display: flex; justify-content: space-between; } #section05 .contact_contena .contact_contena__in img { width: 45.6%; } #section05 .contact_contena .contact_contena__in a img { width: 100%; } #section05 .contact_contena2 { width: 94%; max-width: 1000px; margin: 0px auto 100px auto; border-top: 1px solid #fff; border-bottom: 1px solid #fff; padding: 25px 0; } #section05 .contact_contena2 .contact_contena__in { max-width: 732px; margin: 0 auto; font-size: 15px; } #section05 .contact_contena2 .contact_contena__in span { width: 4em; text-align: justify; display: inline-block; } .boxinline__in { width: 100%; color: #000; padding: 10px; box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; } .color_close__contena { text-align: center; color: #fff; } .color_close { padding: 5px 15px; border: 1px solid #fff; display: inline-block; margin-top: 30px; border-radius: 18px; -webkit-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .color_close:hover { cursor: pointer; background-color: #fff; color: #000; } /*******展示製品リスト***********/ #section01list, #section02list { width: 100%; background-color: #fff; color: #333; padding: 0px 0 150px 0; position: relative; overflow: hidden; } #section01list img, #section02list img { width: 100%; } #section01list .list_mainphoto, #section02list .list_mainphoto { width: 100%; height: 350px; position: relative; overflow: hidden; } #section01list .list_mainphoto .imgwaku, #section02list .list_mainphoto .imgwaku { width: 62.2%; min-width: 860px; position: absolute; right: 0; top: 50%; -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); opacity: 0; -webkit-transition: all 1.5s ease-out; transition: all 1.5s ease-out; } #section01list .list_mainphoto .imgwaku.deray, #section02list .list_mainphoto .imgwaku.deray { transition-delay: 0.8s; } @media screen and (max-width: 630px) { #section01list .list_mainphoto .imgwaku, #section02list .list_mainphoto .imgwaku { width: 100%; min-width: 100px; top: 0%; -webkit-transform: translate(0%, 0%); transform: translate(0%, 0%); } } #section01list .list_mainphoto .imgwaku__on, #section02list .list_mainphoto .imgwaku__on { opacity: 1; } .listtitle_contena { width: 94%; max-width: 1100px; position: absolute; top: 45%; left: 50%; text-align: left; -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); } .listtitle_contena h1 { width: 43.18%; position: relative; overflow: hidden; } .listtitle_contena h2 { width: 43.18%; position: relative; overflow: hidden; } .listtitle_contena .mask_list, .listtitle_contena .mask_list2 { position: absolute; top: 0; width: 200%; left: -98%; height: 100%; -webkit-transition: all 1.2s ease-out; transition: all 1.2s ease-out; } .listtitle_contena .mask_list img, .listtitle_contena .mask_list2 img { width: 100%; height: 100%; } .listtitle_contena .mask_list__on { left: 100%; } .list_main_text { width: 94%; max-width: 1100px; padding: 50px 0; margin: 0 auto; border-bottom: 1px solid #CBCBCB; text-align: left; font-size: 14px; position: relative; overflow: hidden; } .list_main_text .mask_text, .list_main_text .mask_text2 { position: absolute; top: 0; width: 200%; left: -98%; height: 100%; -webkit-transition: all 1.2s ease-out; transition: all 1.2s ease-out; } .list_main_text .mask_text.deray, .list_main_text .mask_text2.deray { transition-delay: 0.3s; } .list_main_text .mask_text img, .list_main_text .mask_text2 img { width: 100%; height: 100%; } .list_main_text .mask_text__on { left: 100%; } .list_one { padding: 65px 0 50px 0; width: 94%; max-width: 1100px; margin: 0 auto; border-bottom: 1px solid #CBCBCB; } .list_one .list_p { float: left; width: 20%; padding: 0 40px 0 10px; } .list_one .list_p_t50 { padding-top: 50px; } .list_one .list_item { float: left; width: 80%; } .list_one .list_item h3 { font-size: 24px; padding-bottom: 25px; line-height: 100%; margin: 0 auto; font-weight: 400; } .list_one .list_item h3 .ttp { display: none; } .list_one ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 auto; width: 100%; padding-left: 0; } .list_one ul li { list-style: none; width: 23.6%; margin-bottom: 18px; } .list_one ul li a { line-height: 100%; padding: 20px 30px; position: relative; width: 100%; background-color: #F0F0F0; display: inline-block; } .list_one ul li a::after { content: "\f0da"; font-size: 16px; font-family: FontAwesome; position: absolute; right: 15px; top: 50%; -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); } .list_one ul li.clum_1 { margin-right: calc(23.6% + 1.86% + 23.6% + 1.86% + 23.6%); } .list_one ul li.clum_2 { margin-right: calc(23.6% + 1.86% + 23.6% + 1.86%); } .list_one ul li.clum_3 { margin-right: calc(23.6% + 1.86%); } .bt_speacer { margin-top: 100px !important; } /*****************************************************************************************************************************************/ /*****************************************************************************************************************************************/ /*****************************************************************************************************************************************/ @media screen and (max-width: 1071px) and (min-width: 631px) { .ftContent { min-width: auto; } .left_text { display: none; } .sub_nav { width: 100%; min-width: 100px; background-color: #333333; color: #fff; height: 41px; text-align: right; font-size: 11px; line-height: 12px; padding: 0 0px 0 0; position: relative; } .sub_nav ul { display: none; } .spnav { position: relative; height: 40px; display: block; } .spnav .spmanubotan { width: 100%; height: 40px; position: relative; } .spnav nav { width: 100%; position: absolute; left: 0; top: 100%; overflow: hidden; height: 0px; z-index: 999; -webkit-transition: all .4s ease-out; transition: all .4s ease-out; } .spnav nav.nav__on { height: 100vh; } .spnav nav.spspmm { font-size: 16px; } .spnav .nav__in { width: 100%; height: 100%; overflow-y: scroll; position: relative; z-index: 999; } .spnav .navnav { background-color: #fff; text-align: center; color: #000; margin-bottom: 150px; box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.4); position: relative; z-index: 999; } .spnav nav.spspmm p { width: 86%; border-bottom: 1px solid #CBCBCB; margin: 0 auto; } .spnav nav.spspmm a { width: 100%; padding: 16px 0; display: inline-block; } .spnav nav.spspmm p.noline { border-bottom: 0px solid #CBCBCB; } .spnav nav.spspmm span { width: 100%; padding: 16px 0; display: inline-block; } .spnav .menu_on { width: 91px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 1; } .spnav .menu_off { width: 91px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; } .spnav .bton { opacity: 1; } .spnav .btoff { opacity: 0; } .fix_under_bt { display: block; position: fixed; left: 0; bottom: 0; width: 100%; z-index: 999; display: flex; justify-content: space-between; } .fix_under_bt .botan__blue { width: 50%; text-align: center; background-color: #333; } .fix_under_bt .botan__blue.bluecolor { background-color: #0D2EA1; } .fix_under_bt .botan__blue a { padding: 15px 0; display: inline-block; color: #fff; } #mainphoto { min-width: auto; height: auto; } #mainphoto div.photo img { height: auto; width: 100%; } #mainphoto .other_contena { width: auto; height: 55vw; } #mainphoto h1 { width: 50%; top: 10vw; } #mainphoto h1 img.pc_only { display: none; } #mainphoto h1 img.sp_only { display: block; width: 100%; } #mainphoto h2 { width: 50%; top: 10vw; } #mainphoto h2 img.pc_only { display: none; } #mainphoto h2 img.sp_only { display: block; width: 100%; } #mainphoto div.fftext.pc_only { display: none; } #mainphoto div.fftext.sp_only { display: block; } #mainphoto div.fftext { position: relative; left: auto; top: auto; font-size: 14px; line-height: 190%; text-align: left; width: 90%; margin: 0 auto; padding: 15px 0; } div.botan_contena { display: none; } #section01 .wide_contena .wideimg { width: 50%; } #section01 .bodytext { width: 50%; left: 45%; top: 45%; } #section01 .bodytext h3 { padding-bottom: 2vw; } #section01 .bodytext p { padding-bottom: 3vw; } ul.item3clum { margin: 0 auto; } #section02 .wide_contena .wideimg { width: 50%; margin-left: auto; } #section02 .bodytext { width: 50%; left: 52%; top: 45%; } #section02 .bodytext h3 { padding-bottom: 2vw; } #section02 .bodytext p { padding-bottom: 3vw; } #section03 .cl_waku dt { width: 20%; } #section03 .cl_waku dd { width: 80%; } #section04 .cl_waku dt { width: 20%; } #section04 .cl_waku dd { width: 80%; } #section01list .list_mainphoto, #section02list .list_mainphoto { height: 30vw; } #section01list .list_mainphoto .imgwaku, #section02list .list_mainphoto .imgwaku { width: 75%; min-width: auto; } .listtitle_contena h1 { width: 50%; } .listtitle_contena h2 { width: 50%; } .list_one ul li { width: 48%; } .list_one ul li.clum_1 { margin-right: 0; } .list_one ul li.clum_2 { margin-right: 0; } .list_one ul li.clum_3 { margin-right: 0; } .list_one ul li.clum_sp_clum { margin-right: 48%; } .st-backToTopFixed { bottom: 65px !important; z-index: 9999; } } /*****************************************************************************************************************************************/ /*****************************************************************************************************************************************/ /*****************************************************************************************************************************************/ @media screen and (max-width: 630px) { .ftContent { width: 100%; min-width: 100px; } .sub_nav { width: 100%; min-width: 100px; background-color: #333333; color: #fff; height: 41px; text-align: right; font-size: 11px; line-height: 12px; padding: 0 0px 0 0; position: relative; } .sub_nav nav ul { list-style: none; } .sub_nav ul li { list-style: none; } .sub_nav.sub_nav__on { position: fixed; top: 0; z-index: 999; } .sub_nav ul { max-width: 1200px; min-width: 100px; margin: 0 auto; padding-top: 13px; display: none; } .sub_nav li { display: inline-block; padding: 0 1em; border-right: 1px solid #ddd; } .sub_nav li i { font-size: 14px; display: inline-block; vertical-align: -1px; } .sub_nav li a { color: #fff; } .sub_nav li:last-child { padding: 0 0em 0 1em; border-right: 0px solid #ddd; } #mainphoto { width: 100%; min-width: 100px; height: auto; position: relative; overflow: hidden; text-align: right; } #mainphoto.mainphoto__on { margin-top: 41px; } #mainphoto div.photo { height: auto; width: 100%; position: relative; top: 0; right: 0; transform: scale(1); } #mainphoto div.photo img { height: auto; width: 100%; } #mainphoto .other_contena { width: 100%; margin: 0 auto; height: auto; position: absolute; top: 10vw; left: 2vw; } #mainphoto h1 { position: absolute; left: 0%; top: 0; width: 76%; } #mainphoto h1 img { width: 100%; } #mainphoto h2 { position: absolute; left: 0%; top: 0; width: 76%; } #mainphoto h2 img { width: 100%; } #mainphoto div.fftext { position: relative; left: auto; top: auto; font-size: 14px; line-height: 190%; text-align: left; width: 90%; margin: 0 auto; padding: 15px 0; } #mainphoto div.fftext .mask2 { position: absolute; top: 0; width: 200%; left: -98%; height: 100%; -webkit-transition: all 1.2s ease-out; transition: all 1.2s ease-out; } #mainphoto div.fftext .mask2 img { width: 100%; height: 100%; } #mainphoto div.fftext .mask__on { left: 100%; } .left_text { position: fixed; left: 3%; top: 55%; width: 10px; -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); -webkit-transition: all .4s ease-out; transition: all .4s ease-out; z-index: 9999; } } @media screen and (max-width: 630px) and (max-width: 1400px) { .left_text { left: 20px; } } @media screen and (max-width: 630px) { .left_text img { width: 10px; } div.botan_contena { position: absolute; left: 0%; top: 560px; width: 555px; display: flex; justify-content: space-between; } div.botan_contena.normal { position: relative; left: auto; top: auto; margin: 0 auto; } div.botan_contena .botan__blue { width: 48%; position: relative; background-color: #0E2E9D; text-align: center; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4); } div.botan_contena .botan__blue::before { position: absolute; content: ""; height: 1px; width: 100%; background-color: #fff; z-index: 2; top: 3px; left: 0; } div.botan_contena .botan__blue::after { position: absolute; content: ""; height: 1px; width: 100%; background-color: #fff; z-index: 2; bottom: 3px; left: 0; } div.botan_contena .botan__blue a { color: #fff; padding: 22px 0; display: inline-block; width: 100%; height: 100%; font-size: 17px; line-height: 100%; } div.botan_contena .botan__blue a:hover { opacity: 1 !important; } div.botan_contena_one { position: relative; width: 262px; margin: 30px auto 0 auto; } div.botan_contena_one .botan__blue { width: 100%; position: relative; background-color: #0E2E9D; text-align: center; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4); } div.botan_contena_one .botan__blue::before { position: absolute; content: ""; height: 1px; width: 100%; background-color: #fff; z-index: 2; top: 3px; left: 0; } div.botan_contena_one .botan__blue::after { position: absolute; content: ""; height: 1px; width: 100%; background-color: #fff; z-index: 2; bottom: 3px; left: 0; } div.botan_contena_one .botan__blue a { color: #fff; padding: 22px 0; display: inline-block; width: 100%; height: 100%; font-size: 17px; line-height: 100%; } div.botan_contena_one .botan__blue a:hover { opacity: 1 !important; } div.botan_contena_form { width: 100%; display: block; justify-content: space-between; } div.botan_contena_form.normal { position: relative; left: auto; top: auto; margin: 0 auto; } div.botan_contena_form .botan__blue { width: 86%; margin: 23px auto 0 auto; position: relative; background-color: #fff; text-align: center; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4); overflow: hidden; color: #000; } div.botan_contena_form .botan__blue i { font-size: 16px; } div.botan_contena_form .botan__blue::before { position: absolute; content: ""; height: 1px; width: 100%; background-color: #000; z-index: 2; top: 3px; left: 0; } div.botan_contena_form .botan__blue::after { position: absolute; content: ""; height: 1px; width: 100%; background-color: #000; z-index: 2; bottom: 3px; left: 0; } div.botan_contena_form .botan__blue a { color: #000; padding: 22px 0; display: inline-block; width: 100%; height: 100%; font-size: 17px; line-height: 100%; } div.botan_contena_form .botan__blue a:hover { opacity: 1 !important; color: #fff; } div.botan_contena_form .botan__blue:hover::before { background-color: #fff; } div.botan_contena_form .botan__blue:hover::after { background-color: #fff; } #section01 { width: 100%; background-color: #333333; color: #fff; padding: 50px 0; position: relative; overflow: hidden; } #section01 .sph3 { width: 62%; margin: 0 auto 30px auto; } #section01 img { width: 100%; } #section01 .wide_contena { width: 100%; position: relative; margin-bottom: 70px; } #section01 .wide_contena .wideimg { width: 100%; margin-bottom: 30px; } #section01 .bodytext { width: 90%; position: relative; left: auto; top: auto; margin: 0 auto; -webkit-transform: translate(0%, 0%); transform: translate(0%, 0%); } #section01 .bodytext h3 { width: 100%; padding-bottom: 24px; } #section01 .bodytext p { font-size: 14px; line-height: 200%; padding-bottom: 30px; } #section01 .bodytext .more_item { width: 220px; margin: 0 auto; overflow: hidden; position: relative; background-color: #fff; text-align: center; } #section01 .bodytext .more_item a { color: #000; padding: 22px 0 19px 0; display: inline-block; width: 100%; height: 100%; font-size: 14px; font-weight: bold; line-height: 100%; } #section01 .bodytext .more_item a:hover { color: #fff; opacity: 1 !important; } #section01 .bodytext .more_item a:hover > span.next_yaji { display: none; } #section01 .bodytext .more_item a:hover > span.next_yaji_w { display: inline-block; } #section01 .bodytext .more_item span { display: inline-block; } #section01 .bodytext .more_item span.next_yaji { width: 32px; display: inline-block; margin-left: 10px; vertical-align: -2px; } #section01 .bodytext .more_item span.next_yaji_w { width: 32px; display: inline-block; margin-left: 10px; vertical-align: -2px; display: none; } #section01 .bodytext .more_item div.kado { width: 10px; position: absolute; top: -1px; right: -1px; } /****白と黒のスライド**/ .white_futa { -webkit-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .white_futa__on { left: 100%; } .black_futa { -webkit-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .black_futa__on { left: 100%; } #section02 { width: 100%; background-color: #fff; color: #000; padding: 50px 0; position: relative; } #section02 .sph3 { width: 62%; margin: 0 auto 30px auto; } #section02 img { width: 100%; } #section02 .wide_contena { width: 100%; position: relative; margin-bottom: 70px; } #section02 .wide_contena .wideimg { width: 100%; margin-left: auto; } #section02 .bodytext { width: 90%; margin: 0 auto; position: relative; left: auto; top: auto; -webkit-transform: translate(0%, 0%); transform: translate(0%, 0%); } #section02 .bodytext h3 { width: 100%; padding-bottom: 24px; } #section02 .bodytext p { font-size: 14px; line-height: 200%; padding-bottom: 30px; } #section02 .bodytext .more_item { width: 220px; margin: 0 auto; overflow: hidden; position: relative; background-color: #000; text-align: center; } #section02 .bodytext .more_item a { color: #fff; padding: 22px 0 19px 0; display: inline-block; width: 100%; height: 100%; font-size: 14px; font-weight: bold; line-height: 100%; } #section02 .bodytext .more_item a:hover { color: #fff; opacity: 1 !important; } #section02 .bodytext .more_item a:hover > span.next_yaji { display: none; } #section02 .bodytext .more_item a:hover > span.next_yaji_w { display: inline-block; } #section02 .bodytext .more_item span { display: inline-block; } #section02 .bodytext .more_item span.next_yaji { width: 32px; display: inline-block; margin-left: 10px; vertical-align: -2px; } #section02 .bodytext .more_item span.next_yaji_w { width: 32px; display: inline-block; margin-left: 10px; vertical-align: -2px; display: none; } #section02 .bodytext .more_item div.kado { width: 10px; position: absolute; top: -1px; right: -1px; } ul.item3clum { width: 94%; max-width: 1100px; margin: 0 auto 0px auto; padding: 0; display: block; justify-content: space-between; list-style: none; } ul.item3clum li { width: 90%; list-style: none; margin: 0 auto 30px auto; } #section03 { width: 100%; background-color: #333333; color: #fff; padding: 50px 0; position: relative; } #section03 h3 { text-align: center; font-size: 24px; letter-spacing: 0.15em; } #section03 .calender_contena_all { width: 94%; max-width: 1100px; margin: 0 auto; background-color: #fff; padding-bottom: 20px; } #section03 .calender_contena { width: 90%; max-width: 1072px; margin: 0px auto; } #section03 .gc-wrap { width: 100%; float: none; max-width: 800px; margin: 0 0% 0 0; } #section03 .g-calendar { position: relative; overflow: hidden; height: 0; padding-bottom: 90%; } #section03 .g-calendar iframe { position: absolute; top: 0; left: 3%; width: 94%; height: 94%; } #section03 .calendar_bt { margin-top: 60px; padding-bottom: 100px; } #section03 .cl_waku { width: 90%; margin: 0 auto 30px auto; border-bottom: 1px solid #CBCBCB; display: block; color: #000; font-size: 16px; } #section03 .cl_waku dt { width: auto; padding: 20px 0 0 3em; display: none; } #section03 .cl_waku dd { display: block; width: 90%; padding: 15px 0 15px 0em; margin: 0 auto; } #section03 .cl_waku_first { width: 90%; margin: 0 auto 0px auto; padding-top: 40px; border-bottom: 1px solid #CBCBCB; } #section04 { width: 100%; background-color: #fff; color: #000; padding: 50px 0; position: relative; } #section04 h3 { text-align: center; font-size: 24px; letter-spacing: 0.15em; } #section04 .google_contena { width: 100%; } #section04 .google_contena iframe { width: 100%; height: 250px; } #section04 .cl_waku { width: 94%; max-width: 1000px; margin: 0 auto 0px auto; border-bottom: 1px solid #CBCBCB; display: block; color: #000; font-size: 16px; font-size: 16px; } #section04 .cl_waku dt { display: none; width: 100%; padding: 20px 0 0 0em; margin: 0 auto; } #section04 .cl_waku dd { display: block; width: 100%; padding: 15px 0 15px 0em; line-height: 180%; margin: 0 auto; } #section04 .cl_waku_first2 { width: 94%; margin: 0 auto 0px auto; padding-top: 40px; border-bottom: 1px solid #CBCBCB; } #section04 .cl_waku p { padding: 0 0; margin: 0 auto; text-indent: -1em; padding-left: 1em; } #section05 { width: 100%; background-color: #333333; color: #fff; padding: 50px 0; position: relative; } #section05 h3 { text-align: center; font-size: 24px; letter-spacing: 0.15em; } #section05 .contact_contena { width: 90%; max-width: 1000px; margin: 40px auto 0px auto; border-top: 1px solid #fff; padding: 25px 0; } #section05 .contact_contena .contact_contena__in { width: 100%; margin: 0 auto; display: block; justify-content: space-between; text-align: center; } #section05 .contact_contena .contact_contena__in img { width: 70%; } #section05 .contact_contena .contact_contena__in a img { width: 70%; margin-bottom: 20px; } #section05 .contact_contena2 { width: 94%; max-width: 1000px; margin: 0px auto 0px auto; border-top: 1px solid #fff; border-bottom: 1px solid #fff; padding: 25px 0; } #section05 .contact_contena2 .contact_contena__in { width: 100%; margin: 0 auto; font-size: 13px; } #section05 .contact_contena2 .contact_contena__in span { width: 4em; text-align: justify; display: inline-block; } .boxinline__in { width: 100%; color: #000; padding: 30px; box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; } .lastimg img { width: 100%; } /**************spナビゲーション**************/ .spnav { position: relative; height: 40px; } .spnav .spmanubotan { width: 100%; height: 40px; position: relative; } .spnav nav { width: 100%; position: absolute; left: 0; top: 100%; overflow: hidden; height: 0px; z-index: 999; -webkit-transition: all .4s ease-out; transition: all .4s ease-out; } .spnav nav.nav__on { height: 100vh; } .spnav nav.spspmm { font-size: 14px; } .spnav nav.spspmm p { width: 86%; border-bottom: 1px solid #CBCBCB; margin: 0 auto; } .spnav nav.spspmm p.noline { border-bottom: 0px solid #CBCBCB; } .spnav nav.spspmm span { width: 100%; padding: 16px 0; display: inline-block; } .spnav nav.spspmm a { width: 100%; padding: 16px 0; display: inline-block; } .spnav .nav__in { width: 100%; height: 100%; overflow-y: scroll; position: relative; z-index: 999; } .spnav .navnav { background-color: #fff; text-align: center; color: #000; margin-bottom: 150px; box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.4); position: relative; z-index: 999; } .spnav .close_menu img { width: 22px; } .spnav .menu_on { width: 91px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 1; } .spnav .menu_off { width: 91px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; } .spnav .bton { opacity: 1; } .spnav .btoff { opacity: 0; } .fix_under_bt { position: fixed; left: 0; bottom: 0; width: 100%; z-index: 999; display: flex; justify-content: space-between; } .fix_under_bt .botan__blue { width: 50%; text-align: center; background-color: #333; } .fix_under_bt .botan__blue.bluecolor { background-color: #0D2EA1; } .fix_under_bt .botan__blue a { padding: 15px 0; display: inline-block; color: #fff; } .st-backToTopFixed { bottom: 65px !important; z-index: 9999; } .st-siteFooter_copyright { margin-bottom: 75px; } /*******展示製品リスト***********/ #section01list, #section02list { width: 100%; background-color: #fff; color: #333; padding: 0px 0 150px 0; position: relative; overflow: hidden; } #section01list img, #section02list img { width: 100%; } #section01list .list_mainphoto, #section02list .list_mainphoto { width: 100%; height: auto; position: relative; overflow: hidden; } #section01list .list_mainphoto .imgwaku, #section02list .list_mainphoto .imgwaku { width: 62.2%; min-width: 860px; position: relative; right: 0; top: 50%; -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); opacity: 0; -webkit-transition: all 1.5s ease-out; transition: all 1.5s ease-out; } #section01list .list_mainphoto .imgwaku.deray, #section02list .list_mainphoto .imgwaku.deray { transition-delay: 0s; } } @media screen and (max-width: 630px) and (max-width: 630px) { #section01list .list_mainphoto .imgwaku, #section02list .list_mainphoto .imgwaku { width: 100%; min-width: 100px; top: 0%; -webkit-transform: translate(0%, 0%); transform: translate(0%, 0%); } } @media screen and (max-width: 630px) { #section01list .list_mainphoto .imgwaku__on, #section02list .list_mainphoto .imgwaku__on { opacity: 1; } #section02list { padding-bottom: 75px; } .listtitle_contena { width: 94%; max-width: 1100px; position: relative; top: auto; left: 0%; text-align: left; -webkit-transform: translate(0%, 0%); transform: translate(0%, 0%); } .listtitle_contena h1 { width: 75%; margin: 70px auto 0 3%; } .listtitle_contena h2 { width: 75%; margin: 70px auto 0 3%; } .list_main_text { width: 94%; max-width: 1100px; padding: 50px 0; margin: 0 auto; border-bottom: 0px solid #CBCBCB; text-align: left; font-size: 14px; } .list_one { padding: 0px 0 30px 0; width: 94%; max-width: 1100px; margin: 0 auto; border-bottom: 0px solid #CBCBCB; } .list_one .list_p { float: none; width: 20%; padding: 0 40px 0 10px; display: none; } .list_one .list_p_t50 { padding-top: 50px; } .list_one .list_item { float: none; width: 100%; } .list_one .list_item h3 { font-size: 14px; padding-bottom: 15px; line-height: 100%; margin: 0 auto; font-weight: 400; display: flex; justify-content: space-between; align-items: flex-end; } .list_one .list_item h3 .ttl { display: inline-block; } .list_one .list_item h3 .ttp { display: inline-block; width: 90px; margin-bottom: -5px; } .list_one ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 auto; width: 100%; padding-left: 0; } .list_one ul li { list-style: none; width: 48%; margin-bottom: 14px; font-size: 12px; } .list_one ul li a { line-height: 100%; padding: 18px 15px; position: relative; width: 100%; background-color: #F0F0F0; display: inline-block; } .list_one ul li a::after { content: "\f0da"; font-size: 16px; font-family: FontAwesome; position: absolute; right: 15px; top: 50%; -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); } .list_one ul li.clum_1 { margin-right: 0; } .list_one ul li.clum_2 { margin-right: 0; } .list_one ul li.clum_3 { margin-right: 0; } .list_one ul li.clum_sp_clum { margin-right: 48%; } } /******アニメーション用css***********/ .ani_first_photo { opacity: 0; -webkit-transition: all 1.2s ease-out; transition: all 1.2s ease-out; transform: scale(1.1) !important; } .ani_first_photo__on { opacity: 1; transform: scale(1) !important; } .first_botan_mc { opacity: 0; -webkit-transition: all 1.5s ease-out; transition: all 1.5s ease-out; } .first_botan_mc__on { opacity: 1; } .fadeup { opacity: 0; -webkit-transition: all 0.6s ease-out; transition: all 0.6s ease-out; -webkit-transform: translate(0%, 50px); transform: translate(0%, 50px); } .fadeup__on { opacity: 1; -webkit-transform: translate(0%, 0px); transform: translate(0%, 0px); }