@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700;800&family=Noto+Sans+JP:wght@400;500;600;800&display=swap');

/*====================================================================

  リセット

====================================================================*/
*, *::before, *::after {box-sizing: border-box;}
* {margin: 0; padding: 0;}
h1, h2, h3, h4, h5, h6 {font-size: 100%;}
img {display: block; max-width: 100%; height: auto;}
iframe {max-width: 100%; vertical-align: bottom; border: 0;}
button, input, select, textarea {color: inherit; font: inherit;}
button {-webkit-appearance: none; appearance: none; border: 0; background: transparent;}
table {border-collapse: collapse; border-spacing: 0;}

/*====================================================================

  設定

====================================================================*/
:root {
    --color-navy: #062653;
    --color-orange: #ff780f;
    --color-orange-dark: #e96500;
    --color-yellow: #ffb400;
    --color-yellow-dark: #f39800;
    --color-green: #06c755;
    --color-green-dark: #079b4f;
    --color-text: #333333;
    --color-white: #ffffff;
    --color-border: #CCCCCC;
}
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body {
    color: var(--color-text);
    background: var(--color-white);
    font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
    font-weight: 600;
    line-height: 1.8;
    overflow-wrap: anywhere;
}
h1, h2, h3, h4, h5, h6 {line-height: 1.5;}

p {line-height: 1.8;}

a {
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.4s ease;
}
:focus-visible {
    outline: 0.3rem solid #2f80ed;
    outline-offset: 0.4rem;
}
.nowrap {white-space: nowrap;}

/* ==================================================================================================================

 共通CSS

================================================================================================================== */

html {font-size: 62.5%;}
body {font-size: 1.8rem;}

@media screen and (max-width: 560px) {
    body {font-size: 1.5rem;}
}


/*-------------------------------------------
 レイアウト
-------------------------------------------*/
.container {
    max-width: 1040px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}
main .container {padding-top: 10vh; padding-bottom: 10vh;}

@media screen and (max-width: 768px) {
    main .container {padding-top: 5vh; padding-bottom: 5vh;}
}

/*-------------------------------------------
 セクション見出し
-------------------------------------------*/
.section-heading {
    margin-bottom: 3em;
    text-align: center;
}
.section-heading__title {
    padding-bottom: 0.4em;
    font-size: clamp(2.8rem, 4vw, 4.2rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0.02em;
    border-bottom: 2px solid var(--color-orange);
    margin-bottom: 0.3em;
    color: var(--color-navy);
}
.section-heading__lead {
}
.section-heading__accent {
    color: var(--color-orange);
    font-size: 170%;
    position: relative;
    bottom: -0.07em;
    font-family: "Roboto";
}
.section-heading--dark {
    color: var(--color-white);
}
.section-heading--dark .section-heading__title {
    color: var(--color-yellow);
    border-bottom: 2px solid var(--color-yellow);
}

@media screen and (max-width: 560px) {
    .section-heading {margin-bottom: 4rem;}
}

/*-------------------------------------------
 お問い合わせボタン
-------------------------------------------*/
.contact-buttons {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 1em;
    justify-content: center;
    margin-top: 8vh;
}
.contact-button {
    width: 17em;
    position: relative;
    padding: 1em 2em 1em 1.5em;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 1em;
    color: var(--color-white);
    border-radius: 0.5em;
    box-shadow: 0 0.3em 0.9em rgba(0, 0, 0, 0.15);
    transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
}
.contact-button::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1.2em;
    width: 0.6em;
    height: 0.6em;
    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    transform: translateY(-70%) rotate(-45deg);
    transition: transform 0.28s ease;
}
.contact-button:hover {
    filter: brightness(1.04);
    transform: translateY(-0.2em);
    box-shadow: 0 1em 2.3em rgba(0, 0, 0, 0.18);
}
.contact-button:active {
    transform: translateY(0);
}
.contact-button__icon {
    grid-row: 1 / 3;
    width: 2em;
    height: 2em;
}
.contact-button__main {
    align-self: end;
    font-size: 130%;
    font-weight: 800;
    line-height: 1.2;
}
.contact-button__sub {
    align-self: start;
    margin-top: 0.4em;
    font-size: 85%;
    line-height: 1.2;
}
.contact-button--mail {
    background: linear-gradient(135deg, var(--color-orange), #ff942f);
}
.contact-button--line {
    background: linear-gradient(135deg, var(--color-green), #0bd971);
}
.contact-button--phone {
    grid-template-columns: 1fr;
    padding: 1em 1.5em;
    text-align: center;
    background: var(--color-navy);
}
.contact-button--phone::after {
    display: none;
}
.contact-button--phone .contact-button__sub {
    align-self: center;
    margin-top: 0;
    margin-bottom: 0.4em;
}
.contact-button--phone .contact-button__main {
    align-self: center;
    font-family: "Roboto", sans-serif;
    font-size: 150%;
}

@media screen and (max-width: 768px) {
    .contact-buttons {margin-top: 5vh;}
}
/*-------------------------------------------
 header
-------------------------------------------*/
.site-header {
    background: var(--color-white);
    box-shadow: 0 0.2rem 1.4rem rgb(1 20 47 / 10%);
}
.site-header .container {
    max-width: 1600px;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.site-title {
    padding-left: 3vw;
}

.site-title__description {
    display: block;
    color: var(--color-text);
    font-size: clamp(1.2rem, 1.03rem + 0.47vw, 1.5rem);
    margin-bottom: -0.3em;
    line-height: 150%;
}
.site-title__name {
    display: block;
    color: var(--color-navy);
    font-size: clamp(2.8rem, 4vw, 3.6rem);
    font-weight: 900;
    line-height: 150%;
}

/*---header用の問い合わせボタン---*/
.contact-buttons__header {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 1em;
    justify-content: center;
}
.contact-button__header {
    width: 16.5em;
    position: relative;
    padding: 1em 2em 1em 1.5em;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 1em;
    color: var(--color-white);
    border-radius: 0.5em;
    box-shadow: 0 0.3em 0.9em rgba(0, 0, 0, 0.15);
    transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
}
.contact-button__header::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1.2em;
    width: 0.6em;
    height: 0.6em;
    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    transform: translateY(-70%) rotate(-45deg);
    transition: transform 0.28s ease;
}
.contact-button__header:hover {
    filter: brightness(1.04);
    transform: translateY(-0.2em);
    box-shadow: 0 1em 2.3em rgba(0, 0, 0, 0.18);
}
.contact-button__header:active {
    transform: translateY(0);
}
.contact-button__header__icon {
    grid-row: 1 / 3;
    width: 2em;
    height: 2em;
}
.contact-button__header__main {
    align-self: end;
    font-size: 130%;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}
.contact-button__header__sub {
    align-self: start;
    margin-top: 0.4em;
    font-size: 85%;
    line-height: 1.2;
    white-space: nowrap;
}
.contact-button__header--mail {
    background: linear-gradient(135deg, var(--color-orange), #ff942f);
}
.contact-button__header--line {
    background: linear-gradient(135deg, var(--color-green), #0bd971);
}
.contact-buttons__header-placeholder {display: none;}

@media screen and (max-width: 960px) {
    .contact-button__header {width: calc((100% / 2) - 1em); max-width: 17em;}
    .site-header {background: none;}
    .site-title {background: #FFF; padding-left: 0;}
    .site-header .container {gap: 0.5rem; flex-direction: column; align-items: stretch; padding: 0.8rem 0 0 0;}
    .site-title {text-align: center;}
    .contact-buttons__header {justify-content: center;}
    .contact-buttons__header-placeholder {display: block; width: 100%; height: 0;}
    .contact-buttons__header-wrap {background: rgb(1 20 47 / 100%); padding: 10px; position: relative;}
    .contact-buttons__header-wrap.is-fixed {position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; background: rgb(1 20 47 / 80%); }
}
@media screen and (max-width: 680px) {
    .contact-button__header {padding: 0.6em 1.5em 0.6em 1em;}
    .contact-button__header__icon {width: 1.7em; height: 1.7em;}
    .contact-button__header__main {font-size: clamp(1.7rem, 1.1375rem + 1.5625vw, 2.2rem);}
    .contact-button__header__sub {font-size: clamp(1.1rem, 0.65rem + 1.25vw, 1.5rem); margin-top: 0.2em;}
}
@media screen and (max-width: 500px) {
    .contact-buttons__header {gap: 10px;}
    .contact-button__header {width: calc(50% - 5px);}
    .contact-button__header .none {display: none;}
    .contact-button__header {padding: 0.6em; column-gap: 0.6em;}

}

/*-------------------------------------------
 hero
-------------------------------------------*/
.hero {
    /*background: #fff4cd;*/
    background: url("../img/hero_wood.jpg") center / contain;
}
.hero .container {
    max-width: 1600px;
    height: 800px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(90deg, rgba(3, 22, 52, 0.3) 0%, rgba(3, 22, 52, 0.2) 38%, rgba(3, 22, 52, 0) 50%, rgba(3, 22, 52, 0) 100%), url("../img/hero_storefront.jpg") 70% center / cover no-repeat;
    padding-left: 5vw;
    padding-right: 5vw;
}
.hero__catch {
    color: var(--color-white);
    font-size: clamp(3.6rem, -0.21rem + 10.59vw, 7.2rem);
    font-weight: 900;
    line-height: 1.3;
    text-shadow: 0 0 0.2em rgb(0 0 0 / 90%);
    margin-bottom: 0.4em;
}
.hero__catch-accent {
    color: var(--color-orange);
}
.hero__description {
    color: var(--color-white);
    font-size: 110%;
    text-shadow: 0 0 0.2em rgb(0 0 0 / 90%);
}
.hero__badges {
    margin-top: 100px;
    max-width: 600px;
    display: flex;
    gap: 1vw;
    list-style: none;
}
.hero__badge {
    width: calc(100% / 3);
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgb(255 255 255 / 95%);
    border: 1px solid var(--color-orange);
    border-radius: 50%;
    box-shadow: 0 0.8rem 2.2rem rgb(0 0 0 / 22%);
    text-align: center;
}
.hero__badge-icon {
    width: 30%;
    height: 30%;
    max-width: 60px;
    max-height: 60px;
}
.hero__badge-content {
    line-height: 1.4;
}
.hero__badge-title, .hero__badge-text {
    display: block;
}
.hero__badge-title {
    font-size: 160%;
    font-weight: 800;
    color: var(--color-navy);
}
.hero__badge-text {
    margin-top: 0.3em;
    font-size: 80%;
    margin-bottom: 1.5em;
}

@media screen and (max-width: 768px) {
    .hero__badges {max-width: 100%; justify-content: center;}
    .hero .container {min-height: 170vw; height: auto; justify-content: flex-end; background: linear-gradient(0deg, rgba(3, 22, 52, 0.4) 0%, rgba(3, 22, 52, 0.2) 38%, rgba(3, 22, 52, 0) 50%, rgba(3, 22, 52, 0) 100%), url("../img/hero_storefront_SP.jpg") 70% center / cover no-repeat;}
    .hero__badges {margin-top: 2em;}
}
@media screen and (max-width: 560px) {
    .hero__badge-title {font-size: 120%;}
    .hero__badge-text {font-size: 62%;}
}
@media screen and (max-width: 420px) {
    .hero__description br {display: none;}
}

/*-------------------------------------------
 works
-------------------------------------------*/
.works {
    color: var(--color-white);
    background: var(--color-navy);
}
.works__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3.5em 5%;
    list-style: none;
}
.works__list--additional {
    padding-top: 3.5em;
}
.works__item {
    min-width: 0;
    text-align: center;
}
.works__image {}

.works__category {
    margin-top: 0.5em;
    font-weight: 400;
    border-bottom: 1px solid var(--color-white);
    margin-bottom: 0.3em;
    padding-bottom: 0.3em;
}
.works__name {
    font-size: 120%;
    font-weight: 600;
}
.works__location {
    margin-top: 0.1em;
}
.works__location::before {
    content: "［";
    margin-right: 0.2em;
}
.works__location::after {
    content: "］";
    margin-left: 0.2em;
}
.works__more {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: height 0.46s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
.works__more:not([hidden]) {
    height: auto;
    opacity: 1;
}
.works__toggle-wrap {
    margin-top: 2em;
    text-align: center;
}
.works__toggle {
    min-width: 13em;
    position: relative;
    padding: 0.7em 2.5em 0.7em 1.4em;
    color: var(--color-white);
    background: var(--color-orange);
    border-radius: 0.6rem;
    box-shadow: 0 0.7rem 1.8rem rgb(0 0 0 / 15%);
    font-size: clamp(1.8rem, 1.4625rem + 0.9375vw, 2.4rem);
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}
.works__toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1.2em;
    width: 0.5em;
    height: 0.5em;
    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.28s ease;
}
.works__toggle:hover {
    background: var(--color-orange-dark);
    box-shadow: 0 1rem 2.3rem rgb(0 0 0 / 20%);
    transform: translateY(-0.2rem);
}

@media screen and (max-width: 768px) {
    .works__list {grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media screen and (max-width: 560px) {
}
@media screen and (max-width: 480px) {
    .works__category {font-size: 85%;}
    .works__name {font-size: 100%;}
    .works__location {font-size: 85%;}
    .works__list {gap: 2em 5%;}
    .works__list--additional {padding-top: 2em;}
}

/*-------------------------------------------
 features
-------------------------------------------*/
.features {
    background: #fafafa;
}
.features__list {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2em;
    list-style: none;
}
.features__item {
    position: relative;
    padding: 1.5em 1.5em 1.5em 3em;
    display: flex;
    align-items: center;
    gap: 2em;
    background: var(--color-white);
    border-radius: 1em;
    box-shadow: 0 0 1em rgba(4, 29, 64, 0.3);
    margin-left: 2em;
}
.features__number {
    font-family: "Roboto", sans-serif;
    position: absolute;
    top: 50%;
    left: -1em;
    width: 2em;
    height: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    background: var(--color-orange);
    border-radius: 50%;
    font-size: clamp(2.8rem, 2.0125rem + 2.1875vw, 4.2rem);
    font-weight: 700;
    transform: translateY(-50%);
}
.features__icon {
    width: 15%;
    height: auto;
}
.features__content {
}
.features__title {
    color: var(--color-navy);
    font-size: 155%;
    font-weight: 800;
    line-height: 130%;
}
.features__text {
    margin-top: 0.6em;
}
@media screen and (max-width: 768px) {
    .features__item {margin-left: 0;}
    .features__number {top: 0.5em; left: -0.5em;}
    .features__item {padding: 1.5em; gap: 1em;}
    .features__text br {display: none;}
}
@media screen and (max-width: 560px) {

}
@media screen and (max-width: 420px) {
    .features__item {padding: 1.0em; gap: 0.8em;}
}

/*-------------------------------------------
 process
-------------------------------------------*/
.process {
    background: var(--color-white);
}
.process__list {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2em;
    list-style: none;
}
.process__list::before {
    content: "";
    position: absolute;
    top: 2em;
    bottom: 2em;
    left: 4.5em;
    width: 3px;
    background: radial-gradient(circle, var(--color-navy) 1.5px, transparent 1.6px) center top / 3px 8px repeat-y;
    transform: translateX(-50%);
}
.process__item {
    position: relative;
    display: grid;
    grid-template-columns: 9em 11em 1fr;
    align-items: center;
}
.process__number {
    position: relative;
    top: 1em;
    justify-self: center;
    font-family: "Roboto", sans-serif;
    width: 2em;
    height: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-navy);
    background: var(--color-white);
    border: 1px solid var(--color-orange);
    border-radius: 50%;
    font-size: clamp(2.8rem, 2.0125rem + 2.1875vw, 4.2rem);
    font-weight: 700;
    transform: translateY(-50%);
}
.process__title {
    color: var(--color-navy);
    font-size: 155%;
    font-weight: 800;
}
.process__text {
    padding-left: 1em;
    border-left: 1px solid var(--color-border);
}
@media screen and (max-width: 768px) {
    .process__item {grid-template-columns: 6em 1fr;}
    .process__text {grid-column: 2; margin-top: -0.5em; padding-left: 0; border: none;}
     .process__list::before {left: 3em;}
}

/*-------------------------------------------
 faq
-------------------------------------------*/
.faq {
    color: var(--color-white);
    background: var(--color-navy);
}
.faq__list {
    width: 100%;
    display: grid;
    gap: 2em;
}
.faq__item {
    border-radius: 0.5em;
    box-shadow: 0 0 1.5em rgb(0 0 0 / 70%);
    overflow: hidden;
}
.faq__button {
    position: relative;
    width: 100%;
    padding: 0.3em 3.0em 0.3em 1.5em;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1.2rem;
    color: var(--color-white);
    background: var(--color-orange);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.18s ease;
}
.faq__button::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1.2em;
    width: 0.6em;
    height: 0.6em;
    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.28s ease;
}
.faq__button:hover {
    background: var(--color-orange-dark);
}
.faq__button[aria-expanded="true"]::after {
    transform: translateY(-30%) rotate(225deg);
}
.faq__label {
    font-size: 200%;
    font-weight: 800;
    font-family: "Roboto";
}
.faq__answer-inner .faq__label {
    color:  var(--color-orange);
    position: relative;
    top: -0.3em;
}
.faq__question-text {
    font-size: 130%;
    line-height: 1.3;
}
.faq__answer {
    height: 0;
    color: var(--color-text);
    background: var(--color-white);
    overflow: hidden;
    opacity: 0;
    transition: height 0.46s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
.faq__answer:not([hidden]) {
    height: auto;
    opacity: 1;
}
.faq__answer-inner {
    padding: 1em 1.5em;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.2rem;
}
.faq__answer-text {}
.faq__note {
    margin-top: 3rem;
    text-align: center;
}

/*-------------------------------------------
 contact
-------------------------------------------*/
.contact {
    background: var(--color-white);
}
.contact .container {
    padding-top: 0;
    padding-bottom: 0;
    max-width: 1200px;
    background: url("../img//contact_operator.jpg") right bottom / auto 85% no-repeat;
}
.contact__content {
    padding: 10vh 0;
}
.contact__title {
    color: var(--color-orange);
    font-size: clamp(2.4rem, -1.2rem + 10vw, 3.8rem);
    font-weight: 800;
    margin-bottom: 1em;
}
.contact__text {}

.contact-buttons--contact {
    margin-top: 2em;
    justify-content: flex-start;
}
.contact-buttons--contact .contact-button {
    width: calc((100% - 2em) / 3);
    max-width: 17em;
}
@media screen and (max-width: 960px) {
    .contact-buttons--contact.contact-buttons {width: 20em; justify-content: center;}
    .contact-buttons--contact .contact-button {width: 100%;}
    .contact .container {background-size: auto 50vw;}
}
@media screen and (max-width: 768px) {
    .contact__content {padding: 5vh 0;}
}
@media screen and (max-width: 500px) {
    .contact__bg {background: url("../img//contact_operator.jpg") 120% top / auto 75% no-repeat;}
    .contact__title span {background: rgba(255, 255, 255, 1); border-right: 1px solid var(--color-orange); border-bottom: 1px solid var(--color-orange); padding: 0 0.2em; margin: 0.1em 0; display: inline-block;}
    .contact .container {background: none;}
    .contact__title {width: 70%;}
    .contact-buttons--contact.contact-buttons {width: 100%;}
}
@media screen and (max-width: 420px) {
    .contact__text {background: #FFF;}
}

/*-------------------------------------------
 footer
-------------------------------------------*/
.site-footer {
    padding: 2em 0;
    color: var(--color-white);
    background: var(--color-navy);
    text-align: center;
}
.site-footer__description {
    font-size: clamp(1.2rem, 1.03rem + 0.47vw, 1.5rem);
    margin-bottom: -0.3em;
}
.site-footer__name {
    font-size: clamp(2.8rem, 4vw, 3.6rem);
    font-weight: 900;
}
.site-footer__copyright {
    display: block;
    margin-top: 2em;
    color: rgb(255 255 255 / 70%);
    font-size: 85%;
}

/*-------------------------------------------
 動きを減らす設定
-------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
    html {scroll-behavior: auto;}
    .skip-link, .contact-button, .works__more, .works__toggle, .works__toggle::after, .faq__button, .faq__button::after, .faq__answer {transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;}
}

/*===========================================
 お問い合わせ　contact.html
===========================================*/
input,
select,
textarea {font-size:16px!important;}

form.mail-form {
	width: 100%;
	line-height: 1.8;
	margin: 0 auto;
	background: #FFFAF0;
	padding: 3%;
}
form.mail-form table {
	width: 100%;
}
form.mail-form tr {
	margin: 0 auto;
	overflow: hidden;
	border-bottom: 3px solid #FFFAF0;
}
form.mail-form th {
	width: 27%;
	padding: 1.5rem 3%;
	text-align: left;
	overflow: hidden;
	background: #FFDDCA;
	vertical-align: top;
	font-weight: 600;
}
form.mail-form td {
	width: 73%;
	padding: 1.5rem 3%;
	text-align: left;
}
form.mail-form td .ex {
	margin-top: 0.5em;
}
form.mail-form .must {
    color: #ED1C24;
	font-size: 80%;
	margin-left: 0.5em;
}
form.mail-form input[type="text"],
form.mail-form input[type="email"],
form.mail-form input[type="tel"] {
	width: 100%;
	padding: 7px 2%;
	border: 1px solid #CCC;
	border-radius: 3px;
	background: #FFF;
	-webkit-appearance: none;
	font-size: 100%;
	font-family: inherit;
	max-width: 100%;
}
form.mail-form input[type="file"] {
	margin-top: 1.0rem;
}
form.mail-form input[type="text"]:focus,
form.mail-form input[type="email"]:focus,
form.mail-form input[type="tel"]:focus,
form.mail-form textarea:focus {
	box-shadow: 0px 0px 5px #29ABFF;
	border: 1px solid #29ABFF;
	background: #FFF;
}
form.mail-form ul li input[type="radio"],
form.mail-form ul li input[type="checkbox"] {
	margin-right: 10px;
    position: relative;
    top: -1px;
}
form.mail-form ul li:first-child input[type="radio"],
form.mail-form ul li:first-child input[type="checkbox"] {
	margin-top: 0px;
}
form.mail-form ul li:first-child input[type="text"] {
	margin-bottom: 0.5rem;
}
form.mail-form select {
	font-size: 1.6rem;
    height: 4.2rem;
	padding : 0 2%;
	border : 1px solid #666666;
    border-radius: 3px;
}
form.mail-form textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 200px;
	padding: 7px 2%;
	resize: vertical;
	border: 1px solid #CCC;
	border-radius: 3px;
	background: #FFF;
	-webkit-appearance: none;
	font-size: 100%;
	font-family: inherit;
}
form.mail-form ul {
	list-style-type: none;
}
form.mail-form ul li label:hover {
	cursor: pointer;
}

form.mail-form input.name,
form.mail-form input.mail_address,
form.mail-form input.phone,
form.mail-form input.address {
	max-width: 100%;
}
form.mail-form input.size_height,
form.mail-form input.size_width {
	width: 100%;
	max-width: 200px;
}
form.mail-form p.form_submit {
	width: 90%;
	margin: 0 auto;
	padding: 15px 0;
}
form.mail-form input[type="submit"] {
	padding: 1.0em 0.5em;
    max-width: 350px;
    width: 100%;
	background: #E90000;
	font-size: 2.0rem!important;
    color: #FFF;
	font-family: inherit;
	-webkit-appearance: none;
    letter-spacing: 0.05em;
    margin: 1em auto 0 auto;
    display: block;
	border: 1px solid #E90000;
	font-weight: 600;
}
form.mail-form input[type="submit"]:hover {
	cursor: pointer;
	background: #E90000;
	color: #FFF;
}
@media screen and (max-width: 768px) {
	form.mail-form td {
		display: block;
		width: 100%;
        margin-bottom: 1.0em;
	}
	form.mail-form th {
		display: block;
		width: 100%;
	}
}