/*-------------------------------------------------------------------------- ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- 汎用 ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- --------------------------------------------------------------------------*/ body {min-height: calc(100vh - 130px); min-width: 320px;} /*汎用flex*/ .flex {display: flex;} /*sp限定*/ .pc {display: none!important;} /*コンティナ*/ .container {padding: 0 6vw; box-sizing: border-box;} /*-------------------------------------------------------------------------- 部品 --------------------------------------------------------------------------*/ /*------------------------------------ 汎用TOP見出し ------------------------------------*/ .g-h-top {margin: 48px 0 35px;} .g-h-top .big {font-size: 1.725rem; letter-spacing: 0; margin-bottom: 14px;} .g-h-top .small {font-size: .95rem;} /*------------------------------------ 汎用TOP見出し(アーカイブ用) ------------------------------------*/ .g-h-arc {margin: 45px 0;} .g-h-arc .big {font-size: 1.725rem; margin-bottom: 6px;} .g-h-arc .small {font-size: .925rem;} /*------------------------------------ 汎用TOP見出し(一部固定ページ用) ------------------------------------*/ .page-heading {height: 100vw;} .page-heading h1 .small {font-size: .95rem;} .page-heading h1 .big {font-size: 1.75rem; margin-top: 20px;} /*------------------------------------ セクションタイトル ------------------------------------*/ .sec-title {padding-top: 30px;} .sec-title .en {margin-bottom: calc(5px + 1vw);} .sec-title .en:after {margin: 0 auto;} /*------------------------------------ MORE ------------------------------------*/ .more, .more > span {width: 474px; max-width: 100%; height: 70px;} .more > span {font-size: 22px; letter-spacing: 2px;} .more > span:before {content: ''; position: absolute; display: block; right: 32px; width: 16px; height: 16px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); z-index: 3; transition: .3s .3s ease;} @media screen and (min-width: 481px) { .more, .more > span {height: 103px;} } /*------------------------------------ SNS・お問い合わせアイコン ------------------------------------*/ .sns-list .icon {width: 40px; height: auto;} /*------------------------------------ TOPスクロール ------------------------------------*/ #scroll {right: 6vw; top: -67px; width: 47px;} /*------------------------------------ goo & carsensor ------------------------------------*/ .link-area {display: flex; justify-content: space-around;} .link-area a {max-width: 48%;} .link-area.fixed {width: 520px; max-width: 100%; position: fixed!important; left: 50%; bottom: 0; transform: translateX(-50%); opacity: 0; z-index: 30!important;} @media screen and (orientation: landscape) and (max-height: 580px) { .link-area.fixed {flex-direction: column; width: 140px; left: auto; right: 0px; bottom: 16px; transform: translateX(0);} .link-area.fixed a.goo {margin-bottom: 12px;} .link-area.fixed a {max-width: 100%;} } /*-------------------------------------------------------------------------- ヘッダー --------------------------------------------------------------------------*/ header {position: absolute; width: 100%; padding: 2% 2% 4%; box-sizing: border-box; z-index: 10;} header #h-navi {align-items: flex-start; box-sizing: border-box;} header #h-navi .left-box {width: 264px; max-width: 50vw; margin-right: 5vw; flex-direction: column;} header #h-navi h1 {margin-bottom: 10%;} header #h-navi .logo {width: 100%;} header #h-navi .tel.sp svg {width: 39px; height: auto;} header #h-navi .menu ul {justify-content: space-between;} header #h-navi .menu li:not(:last-child) a {margin-right: 0em;} header #h-navi .menu li a {font-size: 20px;} header .sns-list li:not(:last-child) {margin-right: 2vw;} @media screen and (max-width: 570px) { header #h-navi .menu {width: calc(100vw - 4% - 64px); max-width: 100%;} } @media screen and (min-width: 641px) { header #h-navi .tel.sp {margin: 0 30px 0 auto;} } @media screen and (max-width: 640px) { header #h-navi .tel.sp {margin: 0 10px 0 auto;} } @media screen and (min-width: 441px) { header #h-navi {padding: 16px 32px 0;} } @media screen and (max-width: 480px) { header #h-navi .menu li:first-child {margin-right: 16px;} header #h-navi .menu li a {font-size: 22px;} } @media screen and (max-width: 440px) { header #h-navi {padding: 16px 16px 0;} } /*-------------------------------------------------------------------------- フッター --------------------------------------------------------------------------*/ footer {padding: 60px 6vw 30px;} footer .g-navi .logo {max-width: 70%;} footer .g-navi .u-l {font-size: 20px;} footer .g-navi .sns-list {max-width: 180px;} footer .g-navi .link-area {width: 234px; max-width: 70%; flex-direction: column;} footer .g-navi .link-area a {max-width: 100%; display: block; margin: 0 auto;} footer .g-navi .link-area a.goo {margin-bottom: 16px;} footer .g-navi .link-area img {width: 100%; height: auto;} @media screen and (min-width: 481px) { footer {padding: 120px 6vw 30px;} } /*-------------------------------------------------------------------------- ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- フロントページ ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- --------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- フロントページ ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- --------------------------------------------------------------------------*/ /*------------------------------------ HERO HEADER ------------------------------------*/ #front .hero {height: 100vh;} #front .hero .copy {top: calc(30vh - 9vw); left: 8.8vw; font-size: 29px; letter-spacing: 1vw; } #front .hero h2 {width: 34.8vw; top: calc(30vh + 40.7vw); right: 10%;} .scroll-bar span {font-size: 23px; letter-spacing: 2px;} .scroll-bar .bar{height: 20vh;} @media screen and (max-width: 580px) { #front .hero .copy {font-size: 24px;} .scroll-bar span {font-size: 18px;} } @media screen and (max-width: 472px) { #front .hero .copy {top: calc(40vh - 12vw); left: 8.8vw; font-size: 24px; letter-spacing: -1px;} #front .hero h2 {top: calc(40vh + 40.7vw);} #front .about-us #logo-main.is-fixed {top: 40vh;} } @media screen and (max-width: 386px) { #front .hero .copy {font-size: 20px;} } @media screen and (orientation: landscape) and (max-height: 580px) { #front .hero {min-height: 700px;} #front .hero .copy {top: 130px;} } /*------------------------------------ ABOUT US ------------------------------------*/ #front .about-us {padding: 10vh 0} #front .about-us .inner {padding-left: 8.695vw; flex-direction: column;} #front .about-us #logo-main.is-fixed {left: 8.695vw;} #front .about-us #logo-main img {width: 66.66666vw;} #front .about-us #logo-main svg {width: 66.66666vw;} #front .about-us #logo-main-area {width: 66.66666vw;} #front .about-us #logo-main-area {margin-bottom: 60px;} #front .about-us ul {margin: 0 13% 0 auto;} #front .about-us ul .en {font-size: 36px;} #front .about-us ul .ja {font-size: 20px; margin-bottom: 20px;} @media screen and (min-width: 481px) { #front .about-us ul .en {font-size: 40px;} #front .about-us ul .ja {font-size: 17px;} } @media screen and (orientation: landscape) and (max-height: 580px) { #front .about-us #logo-main.is-fixed {top: 190px;} } /*------------------------------------ INSTAGRAM ------------------------------------*/ #front .instagram {padding: 80px 4.589vw 110px; box-sizing: border-box;} #front .instagram .sec-title-ig img {width: 40px;} #front .instagram .sec-title-ig {margin-bottom: 70px;} #front .instagram .sec-title-ig span {font-size: 32px;} #front .instagram .ig-list {max-width: 560px; margin: 0 auto; justify-content: space-between;} #front .instagram .ig-list li {width: calc((100% - 4.589vw) / 2); margin-bottom: 4.589vw;} /*------------------------------------ BUSINESS CONTENT ------------------------------------*/ #front .business-content {padding-bottom: 54px;} #front .business-content ol {flex-direction: column;} #front .business-content ol li {position: relative;} #front .business-content ol li:first-child {margin-bottom: 114px;} #front .business-content ol li:nth-child(2) {margin-bottom: 14px;} #front .business-content ol li .links {position: absolute; width: 100%; left: 0; top: calc(100% + 28px); justify-content: space-between;} #front .business-content .order {position: absolute; width: 98%; top: calc(32vw - 30px); font-size: 40px; font-weight: 700;} #front .business-content .order:before {margin: 8px 20px 0 0; padding-right: 0.5em; font-size: 20px; font-weight: normal; letter-spacing: 2px;} #front .business-content .img-cover {position: relative; width: 54.348vw;} #front .business-content .img-cover span {font-size: 32px;} #front .business-content .txt {width: 80%; top: -56px; left: 20%; padding: 5.434vw 6.527vw; text-align: center;} #front .business-content .txt .title {margin-bottom: 14px; font-size: 32px; text-align: left;} #front .business-content .txt .details {margin-bottom: 32px; font-size: 28px; text-align: left;} #front .business-content li:first-child .txt .details {margin-bottom: 0;} #front .business-content .txt a.contact {font-size: 28px;} @media screen and (min-width: 481px) and (max-width: 610px) { #front .business-content .order {top: 23vw; font-size: 50px;} #front .business-content .order:before {font-size: 15px; font-weight: normal;} } @media screen and (max-width: 480px) { #front .business-content .order {position: static;} #front .business-content .img-cover {position: relative; width: 90%;} #front .business-content .txt {width: 90%; top: -56px; left: 10%;} #front .business-content .txt .title {margin-bottom: 14px; font-size: 28px;} #front .business-content .txt .details {margin-bottom: 22px; font-size: 20px;} #front .business-content .txt a.contact {font-size: 20px;} } @media screen and (max-width: 420px) { #front .business-content ol li:first-child {margin-bottom: 60vw;} #front .business-content ol li .links {flex-direction: column;} #front .business-content ol li .links a {width: 100%;} #front .business-content ol li .links a.goo {margin-bottom: 16px;} } /*------------------------------------ WARRANTY ------------------------------------*/ #front .warranty {padding: 110px 0 90px;background: url(../img/top_warr_bg_sp.jpg) no-repeat center top; background-size: cover;} #front .warranty .inner {padding: 0 6vw;} #front .warranty strong {margin-bottom: 130px; font-size: 22px; text-align: center;} /*------------------------------------ SHOP INFORMATION ------------------------------------*/ #front .shop-information {padding-bottom: 60px;} #front .shop-information table {width: 100%; max-width: calc(100% - 32px); margin: 0 auto;} #front .shop-information tr {border-bottom: 1px solid;} #front .shop-information tr:first-of-type {border-top: 1px solid;} #front .shop-information th, #front .shop-information td {display: block; font-size: 22px; text-align: left;} #front .shop-information th {padding-top: 20px;} #front .shop-information td {padding-bottom: 20px;} @media screen and (min-width: 481px) { #front .shop-information table {max-width: calc(100% - 64px);} } @media screen and (max-width: 380px) { #front .shop-information .sec-title .en {font-size: 24px;} } /*------------------------------------ MESSAGE ------------------------------------*/ #front .message {padding-bottom: 60px; background: #efede6;} #front .message .inner {flex-direction: column;} #front .message .img {margin-bottom: 40px;} #front .message .txt p {font-size: 20px;} @media screen and (min-width: 481px) { #front .message .txt p {font-size: 22px;} } /*------------------------------------ GALLERY ------------------------------------*/ #front .gallery {padding-bottom: 100px; background: #efede6;} #front .gallery ul {flex-direction: column;} #front .gallery ul li:not(:last-child) {margin-bottom: 20px;} /*-------------------------------------------------------------------------- ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- テンプレ＆固定ページ ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- --------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- 固定ページ (page.php) --------------------------------------------------------------------------*/ #page {margin-bottom: 100px;} #page .more {margin-top: 100px;} .page:not(.home) main {padding-top: calc(250px + 10vw);} .page-header .page-title {position: absolute; top: -126px; text-align: center; z-index: 2;} .page-header .page-title .en {margin-bottom: 20px; font-size: 40px;} .page-header .page-title .ja {max-width: calc(100% - 12vw); padding: 14px 30px; border-radius: 34.5px; font-size: 22px; line-height: 1;} .page:not(.home) .contents-wrap {padding-top: 30px;} @media screen and (min-width: 481px) { .page:not(.home) main {padding-top: calc(326px + 10vw);} .page-header .page-title .en {margin-bottom: 30px;} .page:not(.home) .contents-wrap {padding-top: 90px;} } /*-------------------------------------------------------------------------- WARRANTY --------------------------------------------------------------------------*/ .page:not(.home) main#warranty {padding-top: calc(210px + 10vw);} #warranty .page-header .page-title {top: -86px;} #warranty .page-header .page-title .ja {width: 220px;} .page:not(.home) #warranty .contents-wrap {padding-top: 0;} #warranty .sec-title-w {margin-bottom: 30px; padding-bottom: 0; font-size: 24px;} #warranty .page-header .img-cover {width: 100%; height: 304px;} #warranty .page-header .img-cover img {width: 100%; height: 100%; font-family: 'object-fit: contain;'; object-fit: cover;} #warranty .relief {padding: 40px 0;} #warranty .relief .svg {width: 154px; max-width: 70%; margin: 0 auto 30px;} #warranty .relief .strength {width: 190px; max-width: 100%; margin: 0 auto 30px; font-size: 20px; border-radius: 50px;} #warranty .relief p {font-size: 20px; text-align: left;} #warranty .repair {padding: 40px 0 70px;} #warranty .repair .img {width: 224px; max-width: 64%; margin: 0 auto 30px;} #warranty .repair .inner {margin-bottom: 40px;} #warranty .repair .inner strong {margin-bottom: 20px; font-size: 32px;} #warranty .repair .inner p {font-size: 24px; line-height: 1.4;} #warranty .repair .repair-list {flex-wrap: wrap; justify-content: space-between;} #warranty .repair .repair-list li, #warranty .service .service-list li {width: calc((100% - 6vw) / 2); margin-bottom: 24px;} #warranty .repair .repair-list .img-cover, #warranty .service .service-list .frame {margin-bottom: 12px;} #warranty .repair .repair-list .title, #warranty .service .service-title .ja {margin-bottom: 6px; font-size: 18px; line-height: 1.4;} #warranty .repair .repair-list p, #warranty .service .note {font-size: 16px; line-height: 1.4;} #warranty .no-cost {padding: 80px 0 30px;} #warranty .no-cost .sec-title-black {top: 0; transform: translateY(-50%);} #warranty .no-cost .sec-title-black > span {padding: 15px 30px; border-radius: 45px; font-size: 20px; line-height: 1.2;} #warranty .no-cost .h_sample {margin-bottom: 100px; font-size: 24px;} #warranty .no-cost .h_sample:before, #warranty .no-cost .h_sample:after {content: ""; position: absolute; width: 16px; height: 2px; bottom: -20px; left: 50%; background: #000;} #warranty .no-cost .h_sample:before {margin-left: -12px; transform: rotate(40deg);} #warranty .no-cost .h_sample:after {margin-left: -2px; transform: rotate(-40deg);} #warranty .no-cost .sample-list {max-width: 720px; margin: 0 auto; flex-direction: column;} #warranty .no-cost .sample-list:after {bottom: 20px; left: calc(50% - 27px); width: 56px; height: 25px;} #warranty .no-cost .sample-list li {padding: 90px 5vw 20px;} #warranty .no-cost .sample-list li:not(:last-child) {margin-bottom: 86px;} #warranty .no-cost .sample-list li:last-child {margin-bottom: 70px;} #warranty .no-cost .sample-list .sample-title {width: 120px; height: 120px; top: -60px; left: calc(50% - 60px);} #warranty .no-cost .sample-list .sample-title .txt_l {font-size: 40px;} #warranty .no-cost .sample-list .sample-title .txt_s {font-size: 22px;} #warranty .no-cost .sample-list .sample-title .txt_m {font-size: 30px;} #warranty .no-cost .sample-list .trouble {margin-bottom: 10px; display: block; font-size: 22px;} #warranty .no-cost .sample-list .trouble:after {width: 38px; height: 17px;} #warranty .no-cost .sample-list .trouble br {display: none;} #warranty .no-cost .sample-list .details {margin-bottom: 10px; font-size: 24px;} #warranty .no-cost .sample-list li:first-child .details br, #warranty .no-cost .sample-list li:nth-child(2) .details br {display: none;} #warranty .no-cost .sample-list .cost-wrap {padding: 12px 0 0px;} #warranty .no-cost .sample-list .cost {font-size: 18px;} #warranty .no-cost .sample-list .normal {margin-top: -12px; display: inline-block; font-size: 20px;} #warranty .no-cost .sample-list .normal span {font-size: 40px;} #warranty .no-cost .egs-warr {padding: 22px 0 22px 18%;} #warranty .no-cost .egs-warr:before {width: 21%; height: 47%; left: 5%;} #warranty .no-cost .egs-warr .upper, #warranty .no-cost .egs-warr .upper * {font-size: 22px;} #warranty .no-cost .egs-warr .all {font-size: 34px;} #warranty .no-cost .egs-warr .yen {font-size: 44px; top: 4px;} #warranty .no-cost .egs-warr .zero {font-size: 100px; top: 3px;} #warranty .service {padding-bottom: 36px;} #warranty .service .sec-title {margin-bottom: 30px;} #warranty .service .service-list li:nth-child(6) .i-b {font-size: 16px;} @media screen and (min-width: 481px) { .page:not(.home) main#warranty {padding-top: calc(296px + 10vw);} #warranty .page-header .page-title {top: -96px;} #warranty .sec-title-w {margin-bottom: 50px; padding-bottom: 20px; font-size: 30px;} #warranty .relief {padding: 90px 0;} #warranty .relief .svg {margin: 0 auto 60px;} #warranty .relief .strength {width: 234px; margin: 0 auto 60px; font-size: 24px;} #warranty .repair {padding: 90px 0 70px;} #warranty .repair .img {margin: 0 auto 40px;} #warranty .repair .inner {margin-bottom: 80px;} #warranty .repair .inner strong {margin-bottom: 30px; font-size: 40px;} #warranty .repair .repair-list .title {margin-bottom: 12px; font-size: 22px; line-height: 1.4;} #warranty .repair .repair-list p {font-size: 20px;} #warranty .no-cost {padding: 70px 0 120px;} #warranty .container {max-width: 600px; margin: 0 auto;} #warranty .no-cost .h_sample {margin-bottom: 110px; font-size: 26px;} #warranty .no-cost .sample-list:after {bottom: 44px; left: calc(50% - 36px); width: 72px; height: 32px;} #warranty .no-cost .sample-list .sample-title {width: 120px; height: 120px; top: -60px; left: calc(50% - 60px);} #warranty .no-cost .sample-list .sample-title .txt_l {font-size: 44px;} #warranty .no-cost .sample-list .sample-title .txt_s {font-size: 22px;} #warranty .no-cost .sample-list .sample-title .txt_m {font-size: 32px;} #warranty .no-cost .sample-list .trouble {margin-bottom: 20px; display: flex; font-size: 24px;} #warranty .no-cost .sample-list .details {font-size: 28px; line-height: 1.3;} #warranty .no-cost .sample-list li {padding: 80px 5vw 40px;} #warranty .no-cost .sample-list li:not(:last-child) {margin-bottom: 114px;} #warranty .no-cost .sample-list .details {margin-bottom: 20px;} #warranty .no-cost .sample-list .cost {font-size: 20px;} #warranty .no-cost .sample-list .normal {font-size: 26px;} #warranty .no-cost .egs-warr {padding: 30px 0 30px 16%;} #warranty .no-cost .egs-warr:before {width: 32%; height: 49%;} #warranty .no-cost .egs-warr .upper, #warranty .no-cost .egs-warr .upper * {font-size: 28px;} #warranty .no-cost .egs-warr .all {font-size: 42px;} #warranty .no-cost .egs-warr .yen {font-size: 56px;} #warranty .no-cost .egs-warr .zero {font-size: 120px;} #warranty .service {padding-bottom: 60px;} #warranty .service .service-title .ja {font-size: 22px;} #warranty .service .service-list li:nth-child(6) .i-b {font-size: 22px;} #warranty .service .note {font-size: 20px;} } @media screen and (max-width: 480px) { #warranty .no-cost .sample-list .trouble {margin-bottom: 40px; display: block; font-size: 22px; position: relative;} #warranty .no-cost .sample-list .trouble:after {width: 32px; height: 13px; position: absolute; top: 100%; left: 50%; margin-left: -16px;} } @media screen and (max-width: 340px) { #warranty .no-cost .sec-title-black > span {font-size: 21px;} #warranty .no-cost .egs-warr {padding: 30px 0 30px 30vw;} #warranty .no-cost .egs-warr:before {width: 30vw; height: 27vw; left: 4vw; margin-left: 0;} #warranty .no-cost .egs-warr .upper, #warranty .no-cost .egs-warr .upper * {font-size: 28px;} #warranty .no-cost .egs-warr .lower {height: 78px; margin-top: 16px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;} #warranty .no-cost .egs-warr .all {font-size: 32px;} #warranty .no-cost .egs-warr .yen {left: 20%; font-size: 50px;} #warranty .no-cost .egs-warr .zero {position: absolute; top: 75px; left: 73%;font-size: 100px;} } /*-------------------------------------------------------------------------- CONTACT (page-contact.php) --------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- メールフォーム --------------------------------------------------------------------------*/ #form-page .page-header .page-title .ja {width: 208px;} #form-page .contact-info h2 {margin-bottom: 20px; font-size: 22px;} #form-page .contact-info:first-child {padding: 40px 0; border-top: 1px solid #000;} #form-page .contact-info:nth-child(2) {padding: 40px 0;} #form-page .contact-info:nth-child(3) {padding: 40px 0 0;} #form-page .contact-info:nth-child(3) h2 {margin-bottom: 20px;} #form-page .contact-info a.tel {margin-bottom: 22px; font-size: 40px; letter-spacing: 0;} #form-page .contact-info .time, #form-page .contact-info .line-account {font-size: 20px;} #form-page .contact-info .line-icon {width: 120px; margin: 0 auto 20px;} #form-page .contact-info .prompt {font-size: 22px;} @media screen and (min-width: 481px) { #form-page .contact-info h2 {margin-bottom: 30px;} #form-page .contact-info:first-child, #form-page .contact-info:nth-child(2) {padding: 60px 0;} #form-page .contact-info:nth-child(3) {padding: 60px 0 0;} #form-page .contact-info a.tel {margin-bottom: 32px;} #form-page .contact-info .line-icon {margin: 0 auto 30px;} } /*------------------------------------ フォーム ------------------------------------*/ /*基礎*/ #form-page form {width: 100%;} #form-page form .inner {margin: 50px 0;} #form-page form .inner > dl {display: block; margin-bottom: 20px;} #form-page form .inner > dl.select-inner {margin: 30px 0;} #form-page form .inner > dl > dt {width: 100%; margin-bottom: 4px; font-size: 20px; text-align: left;} #form-page form .inner > dl.select-inner > dt {margin-bottom: 15px;} #form-page form .inner > dl > dd {width: 100%; font-size: 20px;} #form-page form dl dd.flex {margin: 0;} #form-page form dl dt small {font-size: 18px;} #form-page form .select:before, #form-page form .select:after {content: ""; display: block; width: 13px; height: 2px; position: absolute; top: 26px; background: #000; transition: .3s ease; z-index: 1;} #form-page form .select:before {right: 22px; transform: rotate(-40deg);} #form-page form .select:after {right: 31px; transform: rotate(40deg);} #form-page form label.zip:before {font-size: 28px;} #form-page form label.zip input {padding-left: 42px!important;} #form-page form input[type="text"]:last-of-type, #form-page form input[type="email"]:last-of-type, #form-page form input[type="tel"]:last-of-type, #form-page form textarea:last-of-type, #form-page form select:last-of-type, #form-page form .mwform-radio-field:last-of-type {padding: 10.5px 10px; font-size: 20px;} /*インプット＆テキストエリア＆セレクトボックス*/ #form-page form input[type="text"], #form-page form input[type="email"], #form-page form input[type="tel"], #form-page form input[type="date"], #form-page form input[type="datetime-local"], #form-page form textarea, #form-page form select {font-size: .975rem; padding: 8px 10px;} #form-page form label.zip {width: calc(100% - 120px); margin-bottom: 15px;} #form-page form label.zip:before {top: 14px; font-size: 20px;} #form-page form .auto-input {width: 110px; height: 58px;} #form-page form .e-select .esb-displayer {font-size: .975rem; padding: 8px 48px 8px 10px;} #form-page form .e-select .esb-dropdown {position: absolute; top: 41px; left: -1px;} #form-page form .e-select .esb-item {font-size: .925rem; padding: 6px 8px; white-space: normal; text-overflow: clip;} #form-page form .e-select:before, #form-page form .e-select:after {top: 20px;} #form-page form .e-select:before {right: 12px;} #form-page form .e-select:after {right: 24px;} /*セレクトボックス＆ラジオボタン*/ #form-page form .mwform-radio-field {margin: 0 0 0 30px;} #form-page form .mwform-checkbox-field-text, #form-page form .mwform-radio-field-text {font-size: 18px;} #form-page form .mwform-checkbox-field-text:before, #form-page form .mwform-radio-field-text:before {top: 0px;} #form-page form .mwform-checkbox-field-text:after, #form-page form .mwform-radio-field-text:after {top: 1px;} #form-page form dd.flex .mwform-checkbox-field {width: calc(50% - 26px); margin-left: 26px;} #form-page form .mwform-checkbox-field-text:before, #form-page form .mwform-radio-field-text:before {width: 20px; height: 20px; top: 5px; left: -26px;} #form-page form .mwform-checkbox-field-text:after, #form-page form .mwform-radio-field-text:after {width: 21px; height: 21px; top: 5px; left: -26px;} /*入力要素のmargin-bottom*/ #form-page form input[type="text"], #form-page form input[type="email"], #form-page form input[type="tel"], #form-page form textarea, #form-page form select, #form-page form .mwform-checkbox-field, #form-page form .mwform-radio-field {margin-bottom: 10px;} /*フィニッシュ*/ #form-page form .inner.finish {margin-bottom: 90px;} #form-page form .inner.finish a.link { margin-bottom: 15px; font-size: 18px;} #form-page form .inner.finish .mwform-checkbox-field-text {padding-left: 10px; font-size: 20px; text-align: left;} #form-page form .inner.finish .mwform-checkbox-field-text:before {width: 22px; height: 22px; left: -20px; top: 6px;} #form-page form .inner.finish .mwform-checkbox-field-text:after {width: 23px; height: 23px; left: -20px; top: 6px;} #form-page form label.send, #form-page form label.send input[type="submit"] {width: 235px; height: 52px;} #form-page form label.send {margin: 35px auto 0; border: 1px solid #000;} #form-page form label.send input[type="submit"] {font-size: 20px;} @media screen and (min-width: 481px) { #form-page form label.send input[type="submit"] {width: 300px; height: 65px;} } @media screen and (max-width: 346px) { #form-page form .mwform-checkbox-field-text, #form-page form .mwform-radio-field-text {font-size: 16px;} #form-page form .mwform-checkbox-field-text:before, #form-page form .mwform-radio-field-text:before {width: 18px; height: 18px; top: 2px; left: -26px;} #form-page form .mwform-checkbox-field-text:after, #form-page form .mwform-radio-field-text:after {width: 20px; height: 20px; top: 2px; left: -26px;} #form-page form label.send, #form-page form label.send input[type="submit"] {width: 280px; height: 61px;} } /*-------------------------------------------------------------------------- サンクスページ --------------------------------------------------------------------------*/ #thanks-page .completion {max-width: 500px; margin: 0 auto; padding-bottom: 90px;} #thanks-page .completion h3.sp {margin-bottom: 40px; font-size: 24px; line-height: 1.4;} #thanks-page .completion p.sp {font-size: 18px;} #thanks-page .completion .home.more {width: 235px; margin-top: 60px;} @media screen and (min-width: 481px) { #thanks-page .completion {max-width: 500px; margin: 0 auto; padding-bottom: 135px;} #thanks-page .completion h3.sp {margin-bottom: 80px;} #thanks-page .completion p.sp {font-size: 20px;} #thanks-page .completion .home.more {width: 300px; height: 65px; margin-top: 80px;} } @media screen and (min-width: 330px) { #thanks-page .completion p.sp {font-size: 17px;} } /*-------------------------------------------------------------------------- PRIVACY POLICY (page-privacy.php) --------------------------------------------------------------------------*/ #privacy .contents-wrap {padding-bottom: 85px;} #privacy p, #privacy h4, #privacy h5, #privacy dt, #privacy dd, #privacy li {font-size: 18px;} #privacy h3 {margin: 45px 0 25px; font-size: 20px;} #privacy .blank01 {margin-bottom: 30px;} #privacy .blank02 {margin-bottom: 50px;} #privacy dd a {word-break: break-all;} @media screen and (max-width: 330px) { #privacy .page-header .page-title .en {font-size: 32px;} #privacy .page-header .page-title .ja {font-size: 20px;} } /*-------------------------------------------------------------------------- 404.php --------------------------------------------------------------------------*/ #notfound {height: 444px;} #notfound h1 span {letter-spacing: 5px;} #notfound h1 span.big {font-size: 3.6rem;} #notfound h1 span.small {font-size: 1.5rem;} #notfound p {font-size: .9rem; margin: 12px 0 75px;}