@charset "UTF-8"; /* CSS Document */ //ブレイクポイントを指定------ここから $xl: 1399px; $lg: 1199px; $md: 991px; $sm: 767px; $xs: 575px; @mixin xl { @media screen and (max-width: ($xl)) { @content; } } @mixin lg { @media screen and (max-width: ($lg)) { @content; } } @mixin md { @media screen and (max-width: ($md)) { @content; } } @mixin sm { @media screen and (max-width: ($sm)) { @content; } } @mixin xs { @media screen and (max-width: ($xs)) { @content; } } //ブレイクポイントを指定------ここまで //カラー $green: #22923b; $yellow: #fff100; //下層ページ #ul-header { .header-bg { background-image: url("../img/header-contact.jpg"); } } h2.privacypolicy { margin-top: 5rem; } #privacypolicy { border: solid 0.7px #000; padding: 2rem; width: 80%; margin-top: 3rem; overflow: scroll; height: 170px; margin-top: 3rem; p { font-size: 14px; font-size: 1.4rem; line-height: 2.3rem; span { font-weight: bold; } } } .thanks-box { margin: 12rem auto 16rem; h3 { font-size: 28px; font-size: 2.8rem; margin-bottom: 4rem; } a { font-weight: bold; padding: 1.4rem 6rem; vertical-align: middle; line-height: 1; border: 1px solid $green; background: $green; border-radius: 3rem; color: #fff; -webkit-appearance: none; transition: 0.3s; &:hover { color: $green; background-color: #fff; } } } /* ---------------------- for JavaScript ここから ---------------------- */ form#mail_form dl dt span.required{ display : inline-block; color : #fff; line-height : 1; margin-right: 1rem; padding: 0.4rem 0.5rem; background-color: #ec6d75; font-size: 90%; border-radius: 3px; font-weight: normal; } //form#mail_form dl dt span.any{ // display : inline-block; // color : #004f9c; // line-height : 1; // margin-right: 0.5rem; // padding: 0.4rem 0.5rem; // background-color: #ffffff; // font-size: 90%; // border: 1px solid #004f9c; // border-radius: 3px; // font-weight: normal; //} form#mail_form dl dt span.optional{ display: none; } form#mail_form dl dd span.error_blank, form#mail_form dl dd span.error_format, form#mail_form dl dd span.error_match{ display : block; color : #ff0000; margin-top : 3px; } span.loading{ width : 50px; height : 50px; border-radius : 50%; border-top : 5px solid rgba( 255, 255, 255, 0.2 ); border-right : 5px solid rgba( 255, 255, 255, 0.2 ); border-bottom : 5px solid rgba( 255, 255, 255, 0.2 ); border-left : 5px solid #ffffff; -webkit-transform : translateZ( 0 ); -ms-transform : translateZ( 0 ); transform : translateZ( 0 ); -webkit-animation : load-circle 1.0s linear infinite; animation : load-circle 1.0s linear infinite; position : absolute; top : 50%; left : 50%; margin-top : -25px; margin-left : -25px; } @-webkit-keyframes load-circle{ 0%{ -webkit-transform : rotate( 0deg ); transform : rotate( 0deg ); } 100%{ -webkit-transform : rotate( 360deg ); transform : rotate( 360deg ); } } @keyframes load-circle{ 0%{ -webkit-transform : rotate( 0deg ); transform : rotate( 0deg ); } 100%{ -webkit-transform : rotate( 360deg ); transform : rotate( 360deg ); } } /* ---------------------- for JavaScript ここから ---------------------- */ form#mail_form dt { border-top: 1px solid #c3c3c3; margin-top: 2rem; padding-top: 2rem; font-weight: 400; } form#mail_form dt:first-child{ border-top: none; } form#mail_form dd:nth-child(2), { margin-bottom: 0; margin-top: 0.5rem; } form#mail_form dt:nth-child(3), { margin-top: 2rem; } form#mail_form dt:nth-child(5),form#mail_form dt:nth-child(9) { border-top: 1px dashed #c3c3c3; } form#mail_form dd:last-child{ padding-bottom: 2rem; border-bottom: none; } form#mail_form input[type="text"], form#mail_form input[type="email"], form#mail_form input[type="tel"], form#mail_form textarea{ width : 100%; padding : 0.5rem 1rem; border : 1px solid #cccccc; border-radius : 3px; background : #efefef; -webkit-appearance : none; font-size : 18px; margin-top : 5px; } 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{ border : 1px solid #b2b2b2; background-color: #f1f1f1; outline: none; } form#mail_form input[type="radio"], form#mail_form input[type="checkbox"]{ margin-right : 5px; margin-left: 3em; @include xs { margin-left: 2em; } } form#mail_form input:first-child[type="radio"], form#mail_form input:first-child[type="checkbox"]{ margin-right : 5px; margin-left: 0; } form#mail_form select{ font-size : 100%; margin-top : 5px; } form#mail_form textarea{ display : block; width : 100%; max-width : 100%; height : 200px; padding : 1rem; resize : vertical; border : 1px solid #cccccc; border-radius : 3px; background : #efefef; -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#postal{ width: 30%; } form#mail_form input#postal + a{ display : inline-block; padding : 5px 15px; background : $green; border : 1px solid $green; border-radius : 3px; color : #fff; font-family : inherit; text-decoration : none; } form#mail_form input#postal + a:hover{ cursor : pointer; background : #fff; color: $green; border : 1px solid $green; } form#mail_form ul.kind-list li{ display: inline-block; min-width: 40%; } form#mail_form p#form_submit{ width : 90%; margin : 0 auto; padding : 30px 0 60px 0; } form#mail_form input[type="button"]{ font-weight: bold; padding : 1.4rem 6rem; vertical-align : middle; line-height : 1; border: 1px solid #fff; background : $green; border-radius : 2.2rem; color : #ffffff; -webkit-appearance : none; transition: 0.3s; } form#mail_form input[type="button"]:hover{ cursor : pointer; background : #fff; color: $green; border: 1px solid $green; } form#mail_form input[type="text"], form#mail_form input[type="email"], form#mail_form input[type="tel"], form#mail_form textarea { background-color: #ffffff; } @media (max-width: 767px) { #mainarea section p:nth-child(1) { text-align: justify!important; } #mainarea section p:nth-child(1) br { display: none; } h3 br{ display: inline-block; } } label span { margin-left: 1rem; margin-right: 2rem; vertical-align: middle; } @media screen and ( max-width : 575px ){ } /* ↓ lg 幅以下の時に反映される設定 ↓ */ @media only screen and (max-width: 1199px) { } /* ↓ md 幅以下の時に反映される設定 ↓ */ @media only screen and (max-width: 991px) { } /* ↓ sm 幅以下の時に反映される設定 ↓ */ @media only screen and (max-width: 767px) { #privacypolicy { width: 100%; } } /* ↓ col 幅以下の時に反映される設定 ↓ */ @media only screen and (max-width: 575px) { #privacypolicy h3 { font-size: 18px; font-size: 1.8rem; margin-bottom: 1rem; } #privacypolicy p { font-size: 14px; font-size: 1.4rem; line-height: 1.8; } //article { // margin-top: 8rem; // h2 { // font-size: 24px; // font-size: 2.4rem; // } //} }