@charset "UTF-8"; /* Scss Document */ /* Scss Document */ /*--------------- 追加 reset ---------------*/ *, *::before, *::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } a { color: inherit; text-decoration: none; } a:visited { color: inherit; } li { list-style: none; } /*--------------- 共通 ---------------*/ html { font-size: 62.5%; } .body { width: 100%; max-width: 1920px; overflow-x: hidden; margin: 0 auto; padding: 40px; background: #74a001; color: #000; font-family: "Noto Sans JP", sans-serif; font-size: 2.2rem; line-height: 1.8; -webkit-font-feature-settings: "palt"; -moz-font-feature-settings: "palt"; -ms-font-feature-settings: "palt"; -o-font-feature-settings: "palt"; font-feature-settings: "palt"; } @media only screen and (max-width: 1919px) { .body { min-width: 100%; padding: calc(40 / 1920 * 100vw); font-size: calc(22 / 1920 * 100vw); } } @media only screen and (max-width: 1200px) { .body { padding: calc(40 / 1200 * 100vw); } } @media only screen and (max-width: 640px) { .body { padding: 0; font-size: calc(24 / 600 * 100vw); } } .body_inner { background: #FFF; border-radius: 100px; } @media only screen and (max-width: 1919px) { .body_inner { border-radius: calc(100 / 1920 * 100vw); } } @media only screen and (max-width: 1200px) { .body_inner { border-radius: calc(40 / 1200 * 100vw); } } @media only screen and (max-width: 640px) { .body_inner { border-radius: 0; } } a:hover { opacity: 0.6; transition: 0.5s; } img { width: auto; max-width: 100%; height: auto; max-height: 100%; vertical-align: bottom; } @media only screen and (max-width: 640px) { .pc { display: none !important; } } .sp { display: none !important; } @media only screen and (max-width: 640px) { .sp { display: inherit !important; } } .anchor { /*margin-top: -100px; padding-top: 100px;*/ } @media only screen and (max-width: 640px) { .anchor { margin-top: calc(-80 / 600 * 100vw); padding-top: calc(80 / 600 * 100vw); } } .inner { width: 1580px; margin: 0 auto; padding: 0 30px; } @media only screen and (max-width: 1919px) { .inner { width: calc(1580 / 1920 * 100vw); padding: 0 calc(30 / 1920 * 100vw); } } @media only screen and (max-width: 1200px) { .inner { width: 100%; padding: 0 calc(30 / 1200 * 100vw); } } @media only screen and (max-width: 640px) { .inner { width: 100%; min-width: 100%; padding: 0 calc(20 / 600 * 100vw); } } @media only screen and (max-width: 1919px) { .inner.-middle { width: calc(1200 / 1920 * 100vw); } } @media only screen and (max-width: 1200px) { .inner.-middle { width: 100%; } } @media only screen and (max-width: 640px) { .inner.-middle { width: 100%; } } .inner.-full { padding: 0; width: 100%; } .flex_wrap { -webkit-display: flex; -moz-display: flex; -ms-display: flex; -o-display: flex; display: flex; -webkit-align-items: flex-start; -moz-align-items: flex-start; -ms-align-items: flex-start; -o-align-items: flex-start; align-items: flex-start; justify-content: space-between; } /*--------------- テキスト関係 ---------------*/ .en { font-family: "Jost", sans-serif; } .p { /*　基本のテキスト　*/ /*　に設定のもの font-size: 1.6rem; letter-spacing: .1em; text-indent: .1em; line-height: 1.8; @include css3(font-feature-settings, "palt"); @include sp { min-width: 100%; font-size: calc((24/600)*100vw); } */ } .p_red { color: #e50012 !important; } .p_center { text-align: center !important; } .p_pc_center { text-align: center !important; } @media only screen and (max-width: 640px) { .p_pc_center { text-align: left !important; } } /*--------------- header ---------------*/ .header { position: relative; padding: 40px 0 50px; z-index: 333; } @media only screen and (max-width: 1919px) { .header { padding: calc(40 / 1920 * 100vw) 0 calc(50 / 1920 * 100vw); } } @media only screen and (max-width: 1200px) { .header { padding: calc(40 / 1200 * 100vw) 0 calc(50 / 1200 * 100vw); } } @media only screen and (max-width: 640px) { .header { position: fixed; top: 0; left: 0; width: 100%; height: calc(80 / 600 * 100vw); padding: calc(15 / 600 * 100vw) 0; background: #FFF; } } .header .inner { padding-right: 240px; padding-left: 125px; } @media only screen and (max-width: 1919px) { .header .inner { padding: 0 calc(240 / 1920 * 100vw) 0 calc(125 / 1920 * 100vw); } } @media only screen and (max-width: 1200px) { .header .inner { padding: 0 calc(30 / 1200 * 100vw); } } @media only screen and (max-width: 640px) { .header .inner { padding: 0; } } .header .header_top { -webkit-display: flex; -moz-display: flex; -ms-display: flex; -o-display: flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; justify-content: space-between; width: 1215px; } @media only screen and (max-width: 1919px) { .header .header_top { width: calc(1215 / 1920 * 100vw); } } @media only screen and (max-width: 1200px) { .header .header_top { width: calc(850 / 1200 * 100vw); } } .header .header_logo { width: 396px; } @media only screen and (max-width: 1919px) { .header .header_logo { width: calc(396 / 1920 * 100vw); } } @media only screen and (max-width: 1200px) { .header .header_logo { width: calc(300 / 1200 * 100vw); } } @media only screen and (max-width: 640px) { .header .header_logo { width: 56.3333333333vw; } } .header .header_tel { margin-right: 40px; line-height: 1.1; } @media only screen and (max-width: 1919px) { .header .header_tel { margin-right: calc(40 / 1920 * 100vw); } } @media only screen and (max-width: 1200px) { .header .header_tel { margin: 0; } } @media only screen and (max-width: 640px) { .header .header_tel { margin: 0; } } .header .header_tel a { display: inline-block; padding: 0 150px 0 190px; background: url("../images/common/header_tel_bg01.png") top 50% left no-repeat, url("../images/common/header_tel_bg02.png") top 50% right no-repeat; background-size: 113px, 138px; } @media only screen and (max-width: 1919px) { .header .header_tel a { padding: 0 calc(150 / 1920 * 100vw) 0 calc(190 / 1920 * 100vw); background-size: calc(113 / 1920 * 100vw), calc(138 / 1920 * 100vw); } } @media only screen and (max-width: 1200px) { .header .header_tel a { padding: 0 calc(125 / 1200 * 100vw) 0 calc(160 / 1200 * 100vw); background-size: calc(100 / 1200 * 100vw), calc(115 / 1200 * 100vw); } } @media only screen and (max-width: 640px) { .header .header_tel a { position: relative; display: block; padding: calc(20 / 600 * 100vw) calc(10 / 600 * 100vw) calc(20 / 600 * 100vw) calc(90 / 600 * 100vw); background: #FFF; border-radius: calc(12 / 600 * 100vw); } } @media only screen and (max-width: 640px) { .header .header_tel a:before { position: absolute; top: calc(-60 / 600 * 100vw); left: calc(-30 / 600 * 100vw); content: ""; width: calc(113 / 600 * 100vw); height: calc(88 / 600 * 100vw); background: url("../images/common/header_tel_bg01.png") top center no-repeat; background-size: contain; } } @media only screen and (max-width: 640px) { .header .header_tel a:after { position: absolute; bottom: calc(-60 / 600 * 100vw); right: calc(-20 / 600 * 100vw); content: ""; width: calc(138 / 600 * 100vw); height: calc(104 / 600 * 100vw); background: url("../images/common/header_tel_bg02.png") top center no-repeat; background-size: contain; } } .header .header_tel p { color: #eb8000; font-size: 2rem; font-weight: 600; } @media only screen and (max-width: 1919px) { .header .header_tel p { font-size: calc(20 / 1920 * 100vw); } } @media only screen and (max-width: 1200px) { .header .header_tel p { font-size: calc(16 / 1200 * 100vw); } } @media only screen and (max-width: 640px) { .header .header_tel p { font-size: calc(22 / 600 * 100vw); } } .header .header_tel .tel { position: relative; color: #000; font-size: 5.7rem; font-weight: 700; } @media only screen and (max-width: 1919px) { .header .header_tel .tel { font-size: calc(57 / 1920 * 100vw); } } @media only screen and (max-width: 1200px) { .header .header_tel .tel { font-size: calc(36 / 1200 * 100vw); } } @media only screen and (max-width: 640px) { .header .header_tel .tel { font-size: calc(60 / 600 * 100vw); } } .header .header_tel .tel:before { position: absolute; top: 13px; left: -70px; content: ""; width: 61px; height: 40px; background: url("../images/common/header_tel_ico.png") top center no-repeat; background-size: contain; } @media only screen and (max-width: 1919px) { .header .header_tel .tel:before { top: calc(13 / 1920 * 100vw); left: calc(-70 / 1920 * 100vw); width: calc(61 / 1920 * 100vw); height: calc(40 / 1920 * 100vw); } } @media only screen and (max-width: 1200px) { .header .header_tel .tel:before { top: calc(5 / 1200 * 100vw); left: calc(-55 / 1200 * 100vw); width: calc(50 / 1200 * 100vw); height: calc(33 / 1200 * 100vw); } } @media only screen and (max-width: 640px) { .header .header_tel .tel:before { width: calc(66 / 600 * 100vw); height: calc(43 / 600 * 100vw); top: calc(10 / 600 * 100vw); left: calc(-70 / 600 * 100vw); } } .header .header_tel .time { color: #000; font-size: 2rem; font-weight: 400; } @media only screen and (max-width: 1919px) { .header .header_tel .time { font-size: calc(20 / 1920 * 100vw); } } @media only screen and (max-width: 1200px) { .header .header_tel .time { font-size: calc(16 / 1200 * 100vw); } } @media only screen and (max-width: 640px) { .header .header_tel .time { font-size: calc(22 / 600 * 100vw); } } .header .header_info { position: absolute; top: 53px; right: 40px; width: 285px; } @media only screen and (max-width: 1919px) { .header .header_info { top: calc(53 / 1920 * 100vw); right: calc(40 / 1920 * 100vw); width: calc(285 / 1920 * 100vw); } } @media only screen and (max-width: 1200px) { .header .header_info { top: calc(53 / 1200 * 100vw); right: calc(40 / 1200 * 100vw); width: calc(185 / 1200 * 100vw); } } @media only screen and (max-width: 640px) { .header .header_info { top: calc(10 / 600 * 100vw); right: calc(90 / 600 * 100vw); width: calc(135 / 600 * 100vw); } } @media only screen and (max-width: 640px) { .header .header_info li { display: inline-block; } } .header .header_info li a { display: block; height: 90px; padding: 30px; border-radius: 15px; box-shadow: 0 0 14px -7px rgba(0, 0, 0, 0.5); color: #FFF; font-size: 2.3rem; font-weight: 700; line-height: 30px; text-align: right; } @media only screen and (max-width: 1919px) { .header .header_info li a { height: calc(90 / 1920 * 100vw); padding: calc(30 / 1920 * 100vw); border-radius: calc(15 / 1920 * 100vw); box-shadow: 0 0 calc(14 / 1920 * 100vw) calc(-7 / 1920 * 100vw) rgba(0, 0, 0, 0.5); font-size: calc(23 / 1920 * 100vw); line-height: calc(30 / 1920 * 100vw); } } @media only screen and (max-width: 1200px) { .header .header_info li a { height: calc(66 / 1200 * 100vw); padding: calc(15 / 1200 * 100vw); border-radius: calc(10 / 1200 * 100vw); box-shadow: 0 0 calc(10 / 1200 * 100vw) calc(-5 / 1200 * 100vw) rgba(0, 0, 0, 0.5); font-size: calc(16 / 1200 * 100vw); line-height: calc(30 / 1200 * 100vw); } } @media only screen and (max-width: 640px) { .header .header_info li a { width: calc(60 / 600 * 100vw); height: calc(60 / 600 * 100vw); padding: 0; border-radius: calc(10 / 600 * 100vw); box-shadow: 0 0 calc(14 / 600 * 100vw) calc(-7 / 600 * 100vw) rgba(0, 0, 0, 0.5); } } @media only screen and (max-width: 640px) { .header .header_info li span { display: none; } } .header .header_info .mail a { background: url("../images/common/heade_info_mail.png") top 50% left 30px no-repeat, #eb8000; background-size: 42px; letter-spacing: 0em; } @media only screen and (max-width: 1919px) { .header .header_info .mail a { background: url("../images/common/heade_info_mail.png") top 50% left calc(30 / 1920 * 100vw) no-repeat, #eb8000; background-size: calc(42 / 1920 * 100vw); } } @media only screen and (max-width: 1200px) { .header .header_info .mail a { background: url("../images/common/heade_info_mail.png") top 50% left calc(15 / 1200 * 100vw) no-repeat, #eb8000; background-size: calc(28 / 1200 * 100vw); } } @media only screen and (max-width: 640px) { .header .header_info .mail a { background: url("../images/common/heade_info_mail.png") top 50% center no-repeat, #eb8000; background-size: calc(36 / 600 * 100vw); } } .header .header_info .line { margin-top: 10px; } @media only screen and (max-width: 1919px) { .header .header_info .line { margin-top: calc(10 / 1920 * 100vw); } } @media only screen and (max-width: 1200px) { .header .header_info .line { margin-top: calc(10 / 1200 * 100vw); } } @media only screen and (max-width: 640px) { .header .header_info .line { margin: 0 0 0 calc(5 / 600 * 100vw); } } .header .header_info .line a { background: url("../images/common/heade_info_line.png") top 50% left 25px no-repeat, #00aa00; background-size: 51px; letter-spacing: 0.15em; } @media only screen and (max-width: 1919px) { .header .header_info .line a { background: url("../images/common/heade_info_line.png") top 50% left calc(25 / 1920 * 100vw) no-repeat, #00aa00; background-size: calc(52 / 1920 * 100vw); } } @media only screen and (max-width: 1200px) { .header .header_info .line a { background: url("../images/common/heade_info_line.png") top 50% left calc(13 / 1200 * 100vw) no-repeat, #00aa00; background-size: calc(33 / 1200 * 100vw); } } @media only screen and (max-width: 640px) { .header .header_info .line a { background: url("../images/common/heade_info_line.png") top 50% center no-repeat, #00aa00; background-size: calc(36 / 600 * 100vw); } } .header .gnav { width: 1215px; margin-top: 20px; background: #ebebeb; border-radius: 20px; } @media only screen and (max-width: 1919px) { .header .gnav { width: calc(1215 / 1920 * 100vw); margin-top: calc(20 / 1920 * 100vw); border-radius: calc(20 / 1920 * 100vw); } } @media only screen and (max-width: 1200px) { .header .gnav { width: calc(850 / 1200 * 100vw); margin-top: calc(15 / 1200 * 100vw); border-radius: calc(10 / 1200 * 100vw); } } .header .gnav_button { position: fixed; top: 0; right: 0; display: none; } @media only screen and (max-width: 640px) { .header .gnav_button { display: block; background: url("../images/common/header_menu_open.png") top right no-repeat; background-size: contain; border: none; padding: 0; width: calc(80 / 600 * 100vw); height: calc(80 / 600 * 100vw); cursor: pointer; position: fixed; top: 0; right: 0; z-index: 1001; outline: none; } } @media only screen and (max-width: 640px) { .header .gnav_button.active { background: url("../images/common/header_menu_close.png") top right no-repeat; background-size: contain; } } .header .gnav_menu { -webkit-display: flex; -moz-display: flex; -ms-display: flex; -o-display: flex; display: flex; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; justify-content: space-between; padding: 0.2em 3em; } @media only screen and (max-width: 1200px) { .header .gnav_menu { padding: 0.2em 1em; } } @media only screen and (max-width: 640px) { .header .gnav_menu { display: block; margin-bottom: calc(30 / 600 * 100vw); padding: 0 calc(30 / 600 * 100vw); } } .header .gnav_menu li { font-size: 2rem; font-weight: 700; line-height: 1.4; } @media only screen and (max-width: 1919px) { .header .gnav_menu li { font-size: calc(20 / 1920 * 100vw); } } @media only screen and (max-width: 1200px) { .header .gnav_menu li { font-size: calc(16 / 1200 * 100vw); } } @media only screen and (max-width: 640px) { .header .gnav_menu li { color: #FFF; font-size: calc(31 / 600 * 100vw); text-align: center; } } .header .gnav_menu li a { position: relative; display: block; padding: 1em; } @media only screen and (max-width: 640px) { .header .gnav_menu li a { margin: 0; padding: 0.7em 0; } } .header .gnav_menu li a:hover { opacity: 0.6; transition: 0.5s; } .header .gnav_menu li a:before { position: absolute; top: 27px; left: 0; content: "●"; color: #ffa500; font-size: 1rem; } @media only screen and (max-width: 1919px) { .header .gnav_menu li a:before { top: calc(27 / 1920 * 100vw); font-size: calc(10 / 1920 * 100vw); } } @media only screen and (max-width: 1200px) { .header .gnav_menu li a:before { top: calc(27 / 1200 * 100vw); font-size: calc(7 / 1200 * 100vw); } } @media only screen and (max-width: 640px) { .header .gnav_menu li a:before { content: none; } } @media only screen and (max-width: 640px) { .header .gnav_menu_wrapper { width: 100%; transition: all 0.2s; transform: translate(100%); position: fixed; top: 0; right: 0; z-index: 1000; padding: calc(80 / 600 * 100vw) calc(40 / 600 * 100vw); background-color: #3c8500; } } @media only screen and (max-width: 640px) { .header .gnav_menu_wrapper.open { transform: translate(0); } } /*--------------- form ---------------*/ /* iOSでのデフォルトスタイルをリセット */ input[type=submit], input[type=button], input[type=reset] { border-radius: 0; -webkit-box-sizing: content-box; -webkit-appearance: button; appearance: button; border: none; box-sizing: border-box; } input[type=submit]::-webkit-search-decoration, input[type=button]::-webkit-search-decoration, input[type=reset]::-webkit-search-decoration { display: none; } input[type=submit]::focus, input[type=button]::focus, input[type=reset]::focus { outline-offset: -2px; } input, select, textarea { padding: 0.5em; font-family: "Noto Sans JP", sans-serif; font-size: 2.2rem; line-height: 1.8; -webkit-font-feature-settings: "palt"; -moz-font-feature-settings: "palt"; -ms-font-feature-settings: "palt"; -o-font-feature-settings: "palt"; font-feature-settings: "palt"; } @media only screen and (max-width: 1919px) { input, select, textarea { font-size: calc(22 / 1920 * 100vw); } } @media only screen and (max-width: 1200px) { input, select, textarea { font-size: calc(16 / 1200 * 100vw); } } @media only screen and (max-width: 640px) { input, select, textarea { font-size: calc(24 / 600 * 100vw); } } /*--------------- main ---------------*/ .main { overflow-x: hidden; } @media only screen and (max-width: 640px) { .main { margin-top: calc(80 / 600 * 100vw); } } .page_ttl { padding: 35px 0; background: url("../images/common/bg_brick.jpg"); } @media only screen and (max-width: 1919px) { .page_ttl { padding: calc(35 / 1920 * 100vw) 0; background-size: calc(1867 / 1920 * 100vw); } } @media only screen and (max-width: 1200px) { .page_ttl { padding: calc(30 / 1200 * 100vw) 0; } } @media only screen and (max-width: 640px) { .page_ttl { padding: calc(35 / 600 * 100vw) 0; background-size: calc(1000 / 600 * 100vw); } } .page_ttl h1 { display: flex; align-items: center; justify-content: center; width: 760px; height: 263px; margin: 0 auto; background: url("../images/common/page_ttl_bg.png") right center no-repeat; background-size: contain; color: #FFF; font-size: 5rem; font-weight: 700; letter-spacing: 0.1em; line-height: 1.2; } @media only screen and (max-width: 1919px) { .page_ttl h1 { width: calc(760 / 1920 * 100vw); height: calc(263 / 1920 * 100vw); font-size: calc(50 / 1920 * 100vw); } } @media only screen and (max-width: 1200px) { .page_ttl h1 { width: calc(750 / 1200 * 100vw); height: calc(250 / 1200 * 100vw); font-size: calc(46 / 1200 * 100vw); } } @media only screen and (max-width: 640px) { .page_ttl h1 { width: 100%; height: auto; padding: 0.5em 0; background: #008000; font-size: calc(40 / 600 * 100vw); } } .content { padding: 125px 0; background: url("../images/common/bg_sheet.jpg") top center; border-radius: 0 0 100px 100px; } @media only screen and (max-width: 1919px) { .content { padding: calc(125 / 1920 * 100vw) 0; border-radius: 0 0 calc(100 / 1920 * 100vw) calc(100 / 1920 * 100vw); } } @media only screen and (max-width: 1200px) { .content { padding: calc(100 / 1200 * 100vw) 0; border-radius: 0 0 calc(40 / 1200 * 100vw) calc(40 / 1200 * 100vw); } } @media only screen and (max-width: 640px) { .content { padding: calc(60 / 600 * 100vw) 0; background-size: calc(1879 / 600 * 100vw); border-radius: 0; } } .btn_a { display: flex; justify-content: center; } .btn_a a, .btn_a input { display: flex; align-items: center; justify-content: center; width: 475px; height: 85px; border-radius: 15px; color: #FFF; font-size: 3rem; font-weight: 700; box-shadow: 0 0 14px -7px rgba(0, 0, 0, 0.5); } @media only screen and (max-width: 1919px) { .btn_a a, .btn_a input { width: calc(475 / 1920 * 100vw); height: calc(85 / 1920 * 100vw); border-radius: calc(15 / 1920 * 100vw); box-shadow: calc(3 / 1920 * 100vw) calc(3 / 1920 * 100vw) calc(3 / 1920 * 100vw) 0px rgba(0, 0, 0, 0.25); font-size: calc(30 / 1920 * 100vw); } } @media only screen and (max-width: 1200px) { .btn_a a, .btn_a input { width: calc(320 / 1200 * 100vw); height: calc(60 / 1200 * 100vw); border-radius: calc(15 / 1200 * 100vw); box-shadow: calc(3 / 1200 * 100vw) calc(3 / 1200 * 100vw) calc(3 / 1200 * 100vw) 0px rgba(0, 0, 0, 0.25); font-size: calc(20 / 1200 * 100vw); } } @media only screen and (max-width: 640px) { .btn_a a, .btn_a input { width: calc(475 / 600 * 100vw); height: calc(85 / 600 * 100vw); border-radius: calc(15 / 600 * 100vw); box-shadow: 0 0 calc(14 / 600 * 100vw) calc(-7 / 600 * 100vw) rgba(0, 0, 0, 0.5); font-size: calc(30 / 600 * 100vw); } } .btn_green a, .btn_green input { background: #749d01; } .btn_orange a, .btn_orange input { background: #ff8e00; } .inquiry .content { padding: 120px 0 90px; background: url("../images/common/bg_brick.jpg") top center; border-radius: 0 0 100px 100px; } @media only screen and (max-width: 1919px) { .inquiry .content { padding: calc(120 / 1920 * 100vw) 0 calc(90 / 1920 * 100vw); border-radius: 0 0 calc(100 / 1920 * 100vw) calc(100 / 1920 * 100vw); } } @media only screen and (max-width: 1200px) { .inquiry .content { padding: calc(70 / 1200 * 100vw) 0 calc(50 / 1200 * 100vw); border-radius: 0 0 calc(40 / 1200 * 100vw) calc(40 / 1200 * 100vw); } } @media only screen and (max-width: 640px) { .inquiry .content { padding: calc(90 / 600 * 100vw) 0 calc(50 / 600 * 100vw); background-size: calc(1000 / 600 * 100vw); border-radius: 0; } } .inquiry .inquiry_wrap { display: flex; justify-content: space-between; } @media only screen and (max-width: 640px) { .inquiry .inquiry_wrap { display: block; } } .inquiry .inquiry_mttl { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); width: 100%; padding: 0.6em 0 1em; background: url("../images/common/inquiry_mttl_bg.png") bottom center no-repeat; background-size: 512px; color: #FFF; font-size: 2.8rem; font-weight: 700; letter-spacing: 0.1em; text-align: center; } @media only screen and (max-width: 1919px) { .inquiry .inquiry_mttl { background-size: calc(512 / 1920 * 100vw); font-size: calc(28 / 1920 * 100vw); } } @media only screen and (max-width: 1200px) { .inquiry .inquiry_mttl { background-size: calc(370 / 1200 * 100vw); font-size: calc(20 / 1200 * 100vw); } } @media only screen and (max-width: 640px) { .inquiry .inquiry_mttl { background-size: calc(480 / 600 * 100vw); font-size: calc(27 / 600 * 100vw); } } .inquiry .inquiry_tel, .inquiry .inquiry_web { position: relative; } .inquiry .inquiry_tel p, .inquiry .inquiry_web p { color: #ff8000; font-size: 2.7rem; font-weight: 700; letter-spacing: 0.1em; line-height: 1.1; } @media only screen and (max-width: 1919px) { .inquiry .inquiry_tel p, .inquiry .inquiry_web p { font-size: calc(27 / 1920 * 100vw); } } @media only screen and (max-width: 1200px) { .inquiry .inquiry_tel p, .inquiry .inquiry_web p { font-size: calc(18 / 1200 * 100vw); } } @media only screen and (max-width: 640px) { .inquiry .inquiry_tel p, .inquiry .inquiry_web p { font-size: calc(24 / 600 * 100vw); } } .inquiry .inquiry_tel { width: 640px; } @media only screen and (max-width: 1919px) { .inquiry .inquiry_tel { width: calc(640 / 1920 * 100vw); } } @media only screen and (max-width: 1200px) { .inquiry .inquiry_tel { width: 43%; } } @media only screen and (max-width: 640px) { .inquiry .inquiry_tel { width: 100%; } } .inquiry .inquiry_tel a { display: flex; flex-direction: column; justify-content: center; border-radius: 25px; padding: 60px 30px 30px 140px; background: url("../images/common/inquiry_tel_ico.png") top 120px left 50px no-repeat, #FFF; } @media only screen and (max-width: 1919px) { .inquiry .inquiry_tel a { padding: calc(60 / 1920 * 100vw) calc(30 / 1920 * 100vw) calc(30 / 1920 * 100vw) calc(140 / 1920 * 100vw); background: url("../images/common/inquiry_tel_ico.png") top calc(120 / 1920 * 100vw) left calc(50 / 1920 * 100vw) no-repeat, #FFF; background-size: calc(78 / 1920 * 100vw); border-radius: calc(25 / 1920 * 100vw); } } @media only screen and (max-width: 1200px) { .inquiry .inquiry_tel a { padding: calc(45 / 1200 * 100vw) calc(20 / 1200 * 100vw) calc(20 / 1200 * 100vw) calc(130 / 1200 * 100vw); background: url("../images/common/inquiry_tel_ico.png") top calc(70 / 1200 * 100vw) left calc(50 / 1200 * 100vw) no-repeat, #FFF; background-size: calc(60 / 1200 * 100vw); border-radius: calc(20 / 1200 * 100vw); } } @media only screen and (max-width: 640px) { .inquiry .inquiry_tel a { padding: calc(65 / 600 * 100vw) calc(20 / 600 * 100vw) calc(20 / 600 * 100vw) calc(130 / 600 * 100vw); background: url("../images/common/inquiry_tel_ico.png") top calc(100 / 600 * 100vw) left calc(50 / 600 * 100vw) no-repeat, #FFF; background-size: calc(70 / 600 * 100vw); border-radius: calc(30 / 600 * 100vw); } } .inquiry .inquiry_tel p.tel { margin-top: 0.2em; color: #000; font-size: 7rem; font-weight: 600; letter-spacing: -0.03em; } @media only screen and (max-width: 1919px) { .inquiry .inquiry_tel p.tel { font-size: calc(70 / 1920 * 100vw); } } @media only screen and (max-width: 1200px) { .inquiry .inquiry_tel p.tel { font-size: calc(48 / 1200 * 100vw); } } @media only screen and (max-width: 640px) { .inquiry .inquiry_tel p.tel { font-size: calc(60 / 600 * 100vw); } } .inquiry .inquiry_tel p.time { color: #000; font-size: 2rem; font-weight: 500; } @media only screen and (max-width: 1919px) { .inquiry .inquiry_tel p.time { font-size: calc(20 / 1920 * 100vw); } } @media only screen and (max-width: 1200px) { .inquiry .inquiry_tel p.time { font-size: calc(16 / 1200 * 100vw); } } @media only screen and (max-width: 640px) { .inquiry .inquiry_tel p.time { font-size: calc(20 / 600 * 100vw); } } .inquiry .inquiry_web { width: 800px; padding: 60px 30px 30px; background: #FFF; border-radius: 25px; text-align: center; } @media only screen and (max-width: 1919px) { .inquiry .inquiry_web { width: calc(800 / 1920 * 100vw); padding: calc(60 / 1920 * 100vw) calc(40 / 1920 * 100vw) calc(30 / 1920 * 100vw); border-radius: calc(25 / 1920 * 100vw); } } @media only screen and (max-width: 1200px) { .inquiry .inquiry_web { width: 55%; padding: calc(45 / 1200 * 100vw) calc(20 / 1200 * 100vw) calc(20 / 1200 * 100vw); border-radius: calc(20 / 1200 * 100vw); } } @media only screen and (max-width: 640px) { .inquiry .inquiry_web { width: 100%; margin-top: calc(80 / 600 * 100vw); padding: calc(65 / 600 * 100vw) calc(20 / 600 * 100vw) calc(20 / 600 * 100vw); } } .inquiry .inquiry_web .web_list { display: flex; justify-content: space-between; margin-top: 1em; } .inquiry .inquiry_web .web_list li { width: 340px; } @media only screen and (max-width: 1919px) { .inquiry .inquiry_web .web_list li { width: calc(340 / 1920 * 100vw); } } @media only screen and (max-width: 1200px) { .inquiry .inquiry_web .web_list li { width: calc(250 / 1200 * 100vw); } } @media only screen and (max-width: 640px) { .inquiry .inquiry_web .web_list li { width: calc(250 / 600 * 100vw); } } .inquiry .inquiry_web .web_list li a { display: block; height: 90px; padding: 30px 30px 30px 80px; border-radius: 15px; box-shadow: 0 0 14px -7px rgba(0, 0, 0, 0.5); color: #FFF; font-size: 2.3rem; font-weight: 700; line-height: 30px; } @media only screen and (max-width: 1919px) { .inquiry .inquiry_web .web_list li a { height: calc(90 / 1920 * 100vw); padding: calc(30 / 1920 * 100vw) calc(30 / 1920 * 100vw) calc(30 / 1920 * 100vw) calc(80 / 1920 * 100vw); border-radius: calc(15 / 1920 * 100vw); box-shadow: 0 0 calc(14 / 1920 * 100vw) calc(-7 / 1920 * 100vw) rgba(0, 0, 0, 0.5); font-size: calc(23 / 1920 * 100vw); line-height: calc(30 / 1920 * 100vw); } } @media only screen and (max-width: 1200px) { .inquiry .inquiry_web .web_list li a { height: calc(66 / 1200 * 100vw); padding: calc(15 / 1200 * 100vw) calc(15 / 1200 * 100vw) calc(15 / 1200 * 100vw) calc(30 / 1200 * 100vw); border-radius: calc(10 / 1200 * 100vw); box-shadow: 0 0 calc(10 / 1200 * 100vw) calc(-5 / 1200 * 100vw) rgba(0, 0, 0, 0.5); font-size: calc(16 / 1200 * 100vw); line-height: calc(30 / 1200 * 100vw); } } @media only screen and (max-width: 640px) { .inquiry .inquiry_web .web_list li a { height: calc(115 / 600 * 100vw); padding: calc(75 / 600 * 100vw) calc(10 / 600 * 100vw) calc(5 / 600 * 100vw); border-radius: calc(15 / 600 * 100vw); box-shadow: 0 0 calc(14 / 600 * 100vw) calc(-7 / 600 * 100vw) rgba(0, 0, 0, 0.5); font-size: calc(26 / 600 * 100vw); line-height: 1.2; } } @media only screen and (max-width: 640px) { .inquiry .inquiry_web .web_list li span { /*display: none;*/ } } .inquiry .inquiry_web .web_list .mail a { background: url("../images/common/heade_info_mail.png") top 50% left 30px no-repeat, #eb8000; background-size: 42px; letter-spacing: 0em; } @media only screen and (max-width: 1919px) { .inquiry .inquiry_web .web_list .mail a { background: url("../images/common/heade_info_mail.png") top 50% left calc(30 / 1920 * 100vw) no-repeat, #eb8000; background-size: calc(42 / 1920 * 100vw); } } @media only screen and (max-width: 1200px) { .inquiry .inquiry_web .web_list .mail a { background: url("../images/common/heade_info_mail.png") top 50% left calc(15 / 1200 * 100vw) no-repeat, #eb8000; background-size: calc(28 / 1200 * 100vw); } } @media only screen and (max-width: 640px) { .inquiry .inquiry_web .web_list .mail a { background: url("../images/common/heade_info_mail.png") top calc(20 / 600 * 100vw) center no-repeat, #eb8000; background-size: calc(51 / 600 * 100vw); } } .inquiry .inquiry_web .web_list .line a { background: url("../images/common/heade_info_line.png") top 50% left 25px no-repeat, #00aa00; background-size: 51px; letter-spacing: 0.15em; } @media only screen and (max-width: 1919px) { .inquiry .inquiry_web .web_list .line a { background: url("../images/common/heade_info_line.png") top 50% left calc(25 / 1920 * 100vw) no-repeat, #00aa00; background-size: calc(52 / 1920 * 100vw); } } @media only screen and (max-width: 1200px) { .inquiry .inquiry_web .web_list .line a { background: url("../images/common/heade_info_line.png") top 50% left calc(13 / 1200 * 100vw) no-repeat, #00aa00; background-size: calc(33 / 1200 * 100vw); } } @media only screen and (max-width: 640px) { .inquiry .inquiry_web .web_list .line a { background: url("../images/common/heade_info_line.png") top calc(15 / 600 * 100vw) center no-repeat, #00aa00; background-size: calc(60 / 600 * 100vw); } } .video_wrapper { position: relative; padding-bottom: 56.25%; margin-top: 6em; height: 0; overflow: hidden; } @media only screen and (max-width: 640px) { .video_wrapper { margin: 2em auto 0; max-width: 100%; } } .video_wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /*--------------- footer ---------------*/ .footer { padding-top: 7rem; } @media only screen and (max-width: 1919px) { .footer { padding-top: calc(70 / 1920 * 100vw); } } @media only screen and (max-width: 1200px) { .footer { padding-top: calc(50 / 1200 * 100vw); } } @media only screen and (max-width: 640px) { .footer { margin-bottom: calc(105 / 600 * 100vw); padding: calc(70 / 600 * 100vw) 0; } } .footer .inner { width: auto; } @media only screen and (max-width: 640px) { .footer .inner { padding: 0 calc(30 / 600 * 100vw); } } .footer .footer_bnr { width: 32.5rem; margin: 0 2rem; } @media only screen and (max-width: 1919px) { .footer .footer_bnr { width: calc(325 / 1920 * 100vw); margin: 0 calc(15 / 1920 * 100vw); } } @media only screen and (max-width: 1200px) { .footer .footer_bnr { width: calc(300 / 1200 * 100vw); margin: 0 calc(10 / 1200 * 100vw); } } @media only screen and (max-width: 640px) { .footer .footer_bnr { width: 48%; margin: calc(20 / 600 * 100vw) 0 0; } } .footer .footer_bnr.reform-guide a { display: flex; align-items: center; justify-content: center; background: #ffa911; width: 100%; height: 100%; } .footer .footer_bnr.reform-guide a img { width: 100%; max-width: initial; } .footer .footer_bnr_list { display: flex; justify-content: center; margin-bottom: 13rem; } @media only screen and (max-width: 1919px) { .footer .footer_bnr_list { margin-bottom: calc(130 / 1920 * 100vw); } } @media only screen and (max-width: 1200px) { .footer .footer_bnr_list { margin-bottom: calc(60 / 1200 * 100vw); } } @media only screen and (max-width: 640px) { .footer .footer_bnr_list { flex-wrap: wrap; justify-content: space-between; margin-bottom: calc(60 / 600 * 100vw); } } .footer .footer_logo { width: 51.6rem; margin: 0 auto 2rem; } @media only screen and (max-width: 1919px) { .footer .footer_logo { width: calc(516 / 1920 * 100vw); margin-bottom: calc(20 / 1920 * 100vw); } } @media only screen and (max-width: 1200px) { .footer .footer_logo { width: calc(360 / 1200 * 100vw); margin-bottom: calc(15 / 1200 * 100vw); } } @media only screen and (max-width: 640px) { .footer .footer_logo { width: 100%; margin-bottom: calc(20 / 600 * 100vw); } } .footer .footer_address { font-style: normal; color: #FFF; font-size: 2.8rem; line-height: 1.2; text-align: center; } @media only screen and (max-width: 1919px) { .footer .footer_address { font-size: calc(28 / 1920 * 100vw); } } @media only screen and (max-width: 1200px) { .footer .footer_address { font-size: calc(20 / 1200 * 100vw); } } @media only screen and (max-width: 640px) { .footer .footer_address { font-size: calc(20 / 600 * 100vw); } } .footer_fix { position: fixed; bottom: 0; left: 0; width: 100%; height: calc(105 / 600 * 100vw); background: rgba(255, 255, 255, 0.8); padding: calc(10 / 600 * 100vw); text-align: center; z-index: 10000; } .footer_fix li { display: inline-block; margin: 0 calc(5 / 600 * 100vw); } .footer_fix li img { height: calc(85 / 600 * 100vw); } .page_top { position: fixed; bottom: 0px; right: -60px; z-index: 9999; } @media only screen and (max-width: 1200px) { .page_top { width: calc(222 / 1200 * 100vw); bottom: calc(100 / 1200 * 100vw); right: calc(-60 / 1200 * 100vw); } } @media only screen and (max-width: 640px) { .page_top { width: calc(222 / 600 * 100vw); bottom: calc(-10 / 600 * 100vw); right: calc(-60 / 600 * 100vw); } }/*# sourceMappingURL=common.css.map */