@charset "UTF-8";
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
all: unset;
display: revert;
}
/* Preferred box-sizing value */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Fix mobile Safari increase font-size on landscape mode */
html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
/* Reapply the pointer cursor for anchor tags */
a,
button {
cursor: revert;
}
/* Remove list styles (bullets/numbers) */
ol,
ul,
menu,
summary {
list-style: none;
}
/* For images to not be able to exceed their container */
img {
max-inline-size: 100%;
max-block-size: 100%;
}
/* removes spacing between cells in tables */
table {
border-collapse: collapse;
}
/* Safari - solving issue when using user-select:none on the text input doesn't working */
input,
textarea {
-webkit-user-select: auto;
}
/* revert the 'white-space' property for textarea elements on Safari */
textarea {
white-space: revert;
}
/* minimum style to allow to style meter element */
meter {
-webkit-appearance: revert;
-moz-appearance: revert;
appearance: revert;
}
/* preformatted text - use only for this feature */
:where(pre) {
all: revert;
box-sizing: border-box;
}
/* reset default text opacity of input placeholder */
::-moz-placeholder {
color: unset;
}
::placeholder {
color: unset;
}
/* fix the feature of 'hidden' attribute.
display:revert; revert to element instead of attribute */
:where([hidden]) {
display: none;
}
/* revert for bug in Chromium browsers
- fix for the content editable attribute will work properly.
- webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
:where([contenteditable]:not([contenteditable=false])) {
-moz-user-modify: read-write;
-webkit-user-modify: read-write;
overflow-wrap: break-word;
-webkit-line-break: after-white-space;
-webkit-user-select: auto;
}
/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable=true]) {
-webkit-user-drag: element;
}
/* Revert Modal native behavior */
:where(dialog:modal) {
all: revert;
box-sizing: border-box;
}
/* Remove details summary webkit styles */
::-webkit-details-marker {
display: none;
}
.mt-l {
margin-top: 9rem !important;
}
.mt-m {
margin-top: 4rem !important;
}
.mt-s {
margin-top: 2rem !important;
}
.mt-none {
margin-top: 0 !important;
}
.pt-l {
padding-top: 9rem !important;
}
.pt-m {
padding-top: 4rem !important;
}
.pt-s {
padding-top: 2rem !important;
}
.pt-none {
padding-top: 0 !important;
}
.pb-l {
padding-bottom: 9rem !important;
}
.pb-m {
padding-bottom: 4rem !important;
}
.pb-s {
padding-bottom: 2rem !important;
}
.pb-none {
padding-bottom: 0 !important;
}
.heading {
display: block;
}
.heading.--center {
text-align: center;
}
.heading.--right {
text-align: right;
}
.heading.__a {
font-size: 4.4rem;
font-weight: bold;
color: #00993E;
text-align: center;
padding-bottom: 5.5rem;
}
@media screen and (max-width: 700px) {
.heading.__a {
font-size: 2.8rem;
}
}
.heading.__a span + span {
display: block;
font-size: 32px;
}
@media screen and (max-width: 700px) {
.heading.__a span + span {
font-size: 2rem;
}
}
.heading.__a img {
display: inline-block;
margin-right: 2rem;
}
@media screen and (max-width: 700px) {
.heading.__a img {
height: 2.4rem;
}
}
.heading.__b {
font-size: 2.8rem;
font-weight: bold;
color: #00993E;
text-align: center;
padding-bottom: 3rem;
}
@media screen and (max-width: 700px) {
.heading.__b {
font-size: 2rem;
padding-bottom: 2rem;
}
}
.heading.__b span + span {
display: block;
font-size: 2.4rem;
}
@media screen and (max-width: 700px) {
.heading.__b span + span {
font-size: 1.6rem;
}
}
.heading.__c {
font-weight: bold;
}
.txt {
font-size: 1.6rem;
}
@media screen and (max-width: 700px) {
.txt {
font-size: 1.4rem;
}
}
.txt.--left {
text-align: left;
}
.txt.--center {
text-align: center;
}
.txt.--right {
text-align: right;
}
.txt.--bold {
font-weight: bold;
}
.txt.--small {
font-size: 0.8em;
}
.txt.--lead {
font-size: 1.2em;
}
.txt + .txt {
margin-top: 1rem;
}
div.center {
margin: 0 auto;
text-align: center;
}
.list {
list-style: none;
font-size: 1.6rem;
}
@media screen and (max-width: 700px) {
.list {
font-size: 1.4rem;
}
}
.list li {
position: relative;
padding-left: 2rem;
}
.list li::before {
content: "・";
display: inline-block;
width: 0.33em;
height: 0.33em;
position: absolute;
top: 0;
left: 0;
margin: 0;
}
.list--optional {
display: table;
}
.list--optional li {
display: table-row;
}
.list--optional .marker {
display: table-cell;
padding-right: 0.4rem;
}
.list--link li a::after {
content: "";
display: inline-block;
width: 1rem;
height: 1.6rem;
margin-left: 1rem;
vertical-align: middle;
background: url(../icon/icon_right.png) no-repeat 0 0;
background-size: contain;
}
.i--exlink::after {
content: "";
display: inline-block;
width: 1.6rem;
height: 1.6rem;
margin-left: 0.5rem;
vertical-align: middle;
background: url(../icon/icon_exlink.png) no-repeat 0 0;
background-size: contain;
}
.i--exlink--white::after {
content: "";
display: inline-block;
width: 2rem;
height: 2rem;
margin-left: 1rem;
vertical-align: middle;
background: url(../icon/icon_exlink_white.png) no-repeat 0 0;
background-size: contain;
}
.i--file::after {
content: "";
display: inline-block;
width: 1.2rem;
height: 1.6rem;
margin-left: 1.2rem;
vertical-align: middle;
background: url(../icon/icon_file.png) no-repeat 0 0;
background-size: contain;
}
.button {
display: inline-block;
background-color: #00993E;
border: 1px solid .button prim;
border-radius: 8px;
text-align: center;
padding: 1rem;
font-size: 1.6rem;
}
@media screen and (max-width: 700px) {
.button {
font-size: 1.4rem;
}
}
.button span {
color: white;
}
.button.--white {
background-color: white;
border: 1px solid #00993E;
}
.button.--white span {
color: #00993E;
}
.button.--wide {
width: 100%;
}
.button.--center {
margin: 0 auto;
text-align: center;
}
.table {
margin: 0 auto;
border-collapse: collapse;
width: 100%;
font-size: 1.6rem;
}
@media screen and (max-width: 700px) {
.table {
font-size: 1.4rem;
}
}
.table__left {
width: 30%;
}
.table th {
border-right: 1px solid #99dbe9;
}
.table th,
.table td {
padding: 2rem;
border-top: 1px solid #99dbe9;
border-bottom: 1px solid #99dbe9;
background-color: white;
}
.js-lang__content {
position: relative;
}
.js-lang__btn {
cursor: pointer;
position: absolute;
width: 1px;
top: 0;
right: -30px;
}
.js-lang__btn.--up {
top: -66px;
right: 120px;
}
@media screen and (max-width: 1023px) {
.js-lang__btn.--up {
top: -50px;
right: 50%;
transform: translateX(-50%);
margin-right: 60px;
}
}
@media screen and (max-width: 1023px) {
.js-lang__btn {
top: -50px;
right: 50%;
transform: translateX(-50%);
margin-right: 60px;
}
}
.js-lang__btn > span:first-child::after {
content: "";
display: inline-block;
width: 120px;
height: 60px;
background: url(../icon/btn_en.png) no-repeat 0 0;
background-size: contain;
}
@media screen and (max-width: 1023px) {
.js-lang__btn > span:first-child::after {
content: "";
display: inline-block;
width: 120px;
height: 40px;
background: url(../icon/btn_en_sp.png) no-repeat 0 0;
background-size: contain;
}
}
.js-lang__btn > span:nth-child(2)::after {
content: "";
display: inline-block;
width: 120px;
height: 60px;
background: url(../icon/btn_jp.png) no-repeat 0 0;
background-size: contain;
}
@media screen and (max-width: 1023px) {
.js-lang__btn > span:nth-child(2)::after {
content: "";
display: inline-block;
width: 120px;
height: 40px;
background: url(../icon/btn_jp_sp.png) no-repeat 0 0;
background-size: contain;
}
}
.js-none {
display: none;
}
.bg__prim {
background-color: #fff8f2;
}
.bg__sec--pale {
background-color: #e5f6f9;
}
.bg__sec--medium {
background-color: #99dbe9;
}
.bg__white {
background-color: white;
}
.card {
background-color: white;
}
.card__txt {
margin-top: 9rem;
padding: 0 2.5rem 5rem;
}
.card .js-lang__btn {
top: -66px;
right: 120px;
}
@media screen and (max-width: 1023px) {
.card .js-lang__btn {
top: -50px;
right: 50%;
transform: translateX(-50%);
margin-right: 60px;
}
}
.video {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.youtube {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* 共通設定
----------------------------- */
html {
font-size: 62.5%;
}
body {
position: relative;
font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size: 1.8rem;
font-weight: normal;
line-height: 1.7;
color: #2b2b30;
}
img {
display: block;
width: auto;
max-width: 100%;
margin: 0 auto;
}
sup {
font-size: 60%;
display: inline-block;
vertical-align: baseline;
bottom: 1ex;
}
sub {
font-size: 60%;
display: inline-block;
vertical-align: baseline;
top: 0.5ex;
}
.mt-0 {
margin-top: 0 !important;
}
.mt-s {
margin-top: 2rem;
}
.mt-m {
margin-top: 4rem;
}
.mt-l {
margin-top: 9rem;
}
.pcd {
display: block !important;
}
.spd {
display: none !important;
}
@media screen and (max-width: 700px) {
.pcd {
display: none !important;
}
.spd {
display: block !important;
}
}
.none {
display: none;
}
a {
text-decoration: none;
color: #00993E;
transition: 0.2s;
}
a:hover {
opacity: 0.8;
}
.wrapper {
max-width: 1024px;
margin: 0 auto;
}
@media screen and (max-width: 1023px) {
.wrapper {
padding: 0 1.5rem;
}
}
@media screen and (max-width: 700px) {
.wrapper {
padding: 0 3rem;
}
}
.content-outer {
max-width: 1200px;
margin: 0 auto;
}
.content-inner {
max-width: 900px;
margin: 0 auto;
}
.is-sticky {
position: sticky;
top: 0;
}
#page_top {
position: fixed;
bottom: 30px;
right: 30px;
}
.atmark:before {
content: "@";
width: 1rem;
height: 1rem;
padding: 2px;
}
.figure {
max-width: 100%;
height: auto;
}
.arrow-link {
position: relative;
padding-left: 30px;
}
.arrow-link:before {
content: "";
display: inline-block;
vertical-align: middle;
width: 9px;
height: 9px;
background: url(../icon/icon-tri.png) center center no-repeat;
}
.header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100px;
z-index: 999;
transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.header.scrolled {
position: sticky;
background-color: white;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.header-logo {
max-width: 280px;
}
.header-content {
padding: 0 20px;
height: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: rgba(255, 255, 255, 0.3);
overflow: hidden; /* 角を丸くしたときに内容がはみ出さないように */
border-bottom-left-radius: 20px; /* 左下の角を丸くする */
border-bottom-right-radius: 20px; /* 右下の角を丸くする */
}
.header-nav li {
display: inline-block;
text-decoration: none;
transition: background-size 0.4s;
padding-bottom: 5px;
}
.header-nav li:hover {
opacity: 0.8;
background-size: 100% 5px;
}
.header-nav li a {
display: block;
width: 100%;
height: 100%;
padding: 0.5rem;
color: #333;
font-size: 1.6rem;
font-weight: 500;
}
.header-nav .past {
position: relative;
}
.header-nav .past:hover ul {
display: block;
}
.header-nav .past ul {
display: none;
position: absolute;
background-color: #00993E;
}
.header-nav .past ul li {
text-align: center;
margin: 0 auto;
}
.header-nav .past ul li a {
display: block;
color: white;
padding-left: 1rem;
}
.header__button {
font-size: 1.4rem;
text-align: center;
background-color: #00993E;
border: 1px solid #00993E;
border-radius: 8px;
}
.header__button span {
display: block;
color: white;
padding: 0.5rem;
}
.header__sns {
display: flex;
}
.header__sns a {
display: inline-block;
width: 29.1px;
}
.header__sns a:first-child {
margin-right: 29.1px;
}
@media screen and (max-width: 700px) {
.header {
height: 70px;
}
.header-content {
height: 70px;
}
.header-nav {
display: none;
}
.header-button {
display: none;
}
.header-logo {
max-width: 140px;
margin-left: 13px;
margin-right: auto;
}
.header__button {
margin-left: auto;
}
.header__sns {
display: none;
}
}
.hamburger {
display: none;
width: 70px;
height: 70px;
margin: 0 0 0 auto;
}
@media screen and (max-width: 700px) {
.hamburger {
display: block;
}
}
.hamburger-inner {
position: relative;
margin: auto;
width: 30px;
height: 25px;
top: 50%;
transform: translate(0, -50%);
}
.hamburger-inner span {
position: absolute;
top: 50%;
left: 0;
display: block;
width: 100%;
height: 2px;
background-color: #00993E;
transform: translateY(-50%);
}
.hamburger-inner::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background-color: #00993E;
}
.hamburger-inner::after {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: #00993E;
}
.hamburger-inner.spin span {
display: none;
}
.hamburger-inner.spin:before {
top: 50%;
transform: rotate(45deg);
}
.hamburger-inner.spin::after {
top: 50%;
transform: rotate(135deg);
}
.sp-nav {
display: none;
}
@media screen and (max-width: 700px) {
.sp-nav {
z-index: 1;
position: fixed;
top: 70px;
left: 0;
height: 100vh;
display: block;
background: white;
transition: all 0.2s ease-in-out;
opacity: 0;
transform: translateX(-100%);
padding-right: 3rem;
}
.sp-nav li {
margin-top: 2px;
}
.sp-nav li span {
font-size: 15px;
}
.sp-nav li a {
display: block;
padding: 1.5rem 8rem 1.5rem 4rem;
background-color: #C9E2B4;
color: black;
}
.sp-nav li ul {
padding-left: 2rem;
}
.sp-nav .close {
position: relative;
padding-left: 20px;
}
.sp-nav .close::before {
content: "";
position: absolute;
top: 50%;
left: 0;
display: block;
width: 16px;
height: 1px;
background: #fff;
transform: rotate(45deg);
}
.sp-nav .close::after {
content: "";
position: absolute;
top: 50%;
left: 0;
display: block;
width: 16px;
height: 1px;
background: #fff;
transform: rotate(-45deg);
}
.toggle {
transform: translateY(0);
opacity: 1;
}
}
.footer {
text-align: center;
color: #00993E;
}
.hero {
padding: 0;
position: relative;
width: 100%;
max-width: 1920px;
margin: 0 auto;
overflow: hidden;
}
.hero-slides-container {
position: relative;
width: 100%;
height: 938px; /* 幅1920px以上で固定高さ（PC画像: 1920x938px） */
}
.hero-slide-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.hero-slide-item.active {
opacity: 1;
}
.hero-slide-item img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center top;
object-position: center top;
display: block;
}
/* 幅1920px以下：アスペクト比を維持 */
@media (max-width: 1920px) {
.hero-slides-container {
height: auto; /* 高さをリセット */
aspect-ratio: 1920/938; /* PC画像の比率（約2.05:1） */
}
}
/* SP用（幅768px以下）：SP画像の比率を適用 */
@media screen and (max-width: 700px) {
.hero-slides-container {
aspect-ratio: 750/600; /* SP画像の比率（約1.25:1） */
}
.hero-slide-item img.pcd {
display: none; /* PC用画像を非表示 */
}
.hero-slide-item img.spd {
display: block; /* SP用画像を表示 */
}
}
/* PC用（幅769px以上） */
@media (min-width: 701px) {
.hero-slide-item img.pcd {
display: block; /* PC用画像を表示 */
}
.hero-slide-item img.spd {
display: none; /* SP用画像を非表示 */
}
}
.hero-navigation {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 5px 0;
}
.hero-copy {
position: absolute;
width: 100%;
bottom: 10%;
background: rgba(200, 255, 200, 0.4);
padding: 0.5% 0;
text-align: center;
font-size: 32px;
font-weight: 500;
}
.hero-copy p {
text-shadow: 2px 2px 2px #fff, 2px -2px 2px #fff, -2px 2px 2px #fff, -2px -2px 2px #fff;
}
/* 元のメディアクエリ（Sassミックスイン）を再現 */
@media (max-width: 768px) { /* タブレット相当 */
.hero-copy {
font-size: 24px;
bottom: 12%;
}
}
@media (max-width: 480px) { /* スマホ相当 */
.hero-copy {
font-size: 16px;
bottom: 14%;
padding: 0.2% 0;
}
}
.nav-dots {
display: flex;
gap: 10px;
padding: 8px 15px;
border-radius: 20px;
}
.dot {
width: 12px;
height: 12px;
background: rgba(200, 200, 200, 0.5);
border-radius: 50%;
cursor: pointer;
transition: background 0.3s ease;
}
.dot.active {
background: #00993E;
}
.dot:focus {
outline: 2px solid #fff;
outline-offset: 2px;
}
.hero.--second {
height: 30vh;
min-height: 220px;
display: flex;
justify-content: center;
align-items: center;
background-color: #E1ECEC;
}
.hero.--second .page-title {
font-size: 32px;
}
.post-31 h2 {
font-weight: bold;
padding: 10px 0;
}
.post-31 h2:first-of-type {
padding: 0 0 10px;
}
.small {
font-size: 0.8em;
color: #333333;
}
.news {
margin-top: 0;
padding-top: 0;
}
.news-content {
display: flex;
}
@media screen and (max-width: 700px) {
.news-content {
flex-direction: column;
align-items: center;
}
}
.news-title {
margin-right: 20px;
text-align: center;
max-width: 30%;
}
@media screen and (max-width: 700px) {
.news-title {
max-width: 46%;
margin-right: 0;
}
}
.news-title h3 {
padding: 10px;
font-size: 1.8rem;
}
.news-article {
display: flex;
flex-direction: column;
width: 70%;
}
@media screen and (max-width: 700px) {
.news-article {
width: 100%;
}
}
.news .tbl {
flex: 1;
}
.tbl {
margin-top: 50px;
border-top: 1px solid #c7c7c7;
border-bottom: 1px solid #c7c7c7;
}
@media screen and (max-width: 700px) {
.tbl {
margin-top: 10px;
font-size: 0.9em;
}
}
.tbl-content {
display: flex;
padding: 10px;
align-items: center;
}
.tbl-content.--second {
max-width: 90%;
margin: 0 auto;
}
@media screen and (max-width: 1023px) {
.tbl-content {
flex-wrap: wrap;
}
}
.tbl-content p {
padding-right: 10px;
}
.tbl-content p:nth-child(1) {
min-width: 90px;
}
.tbl-content p:nth-child(2) {
max-width: 70%;
}
.tbl-content p:nth-child(3) {
padding: 2px 12px;
border: solid 1px #c7c7c7;
margin-left: auto;
font-size: 1.4rem;
}
@media screen and (max-width: 1023px) {
.tbl-content p:nth-child(1) {
order: 1;
min-width: 75px;
}
.tbl-content p:nth-child(2) {
order: 3;
width: 100%;
max-width: 100%;
padding-left: 0;
margin-top: 5px;
}
.tbl-content p:nth-child(3) {
margin-left: 20px;
order: 2;
}
}
.tbl-past {
display: flex;
justify-content: flex-end;
margin-top: 5px;
}
.tbl-past a {
display: inline-block;
}
.year-divider {
padding: 40px 0;
}
.h2 {
font-size: 30px;
text-align: center;
}
.company {
background: #E1ECEC;
}
.company-content {
margin-top: 9rem;
display: flex;
text-align: center;
align-items: stretch;
background-color: #f2f2f2;
overflow: hidden;
background: linear-gradient(to bottom, #C9E2B4, #FFFFE5);
}
@media screen and (max-width: 1023px) {
.company-content {
flex-direction: column;
}
}
.company-ttl {
width: 50%;
padding: 20px;
font-size: 24px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
padding: 100px 0;
order: 2;
}
@media screen and (max-width: 1023px) {
.company-ttl {
width: 100%;
min-height: 200px;
}
}
.company-txt {
display: flex;
align-items: center;
justify-content: center;
width: 50%;
font-size: 24px;
padding: 20px;
background-color: #f2f2f2;
order: 3;
}
.company-txt.--2 {
font-size: 16px;
text-align: left;
order: 1;
}
@media screen and (max-width: 1023px) {
.company-txt.--2 {
order: 3;
}
}
.company-txt.--2 p {
padding: 10px;
}
@media screen and (max-width: 1023px) {
.company-txt {
width: 100%;
min-height: 200px;
}
}
.company table {
font-size: 14px;
margin: 10px auto;
text-align: left;
border-collapse: collapse;
}
.company table tr {
background-color: white;
border-top: 2px solid #00993E;
border-bottom: 2px solid #00993E;
}
.company table td, .company table th {
padding: 10px;
}
.company table th {
border-right: 1px solid #c7c7c7;
}
.work-content {
background: #f2f2f2;
}
.work-content .content-wrap {
width: 90%;
margin: 0 auto;
padding: 20px 0;
border-top: 10px solid #c7c7c7;
}
.work-content h3 {
font-size: 24px;
}
@media screen and (max-width: 700px) {
.work-content h3 {
text-align: center;
}
}
.work-content .content-box {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
@media screen and (max-width: 700px) {
.work-content .content-box {
flex-direction: column;
}
}
.work-content .figure {
max-width: 30%;
text-align: center;
}
@media screen and (max-width: 700px) {
.work-content .figure {
max-width: 100%;
order: 2;
}
.work-content .figure:first-child {
margin-bottom: 2rem;
}
}
.work-content figcaption {
padding-top: 10px;
}
.work-content .figure:nth-child(2) {
color: #00993E;
}
.work-content .txt {
max-width: 36%;
}
.work-content .txt p {
background: white;
padding: 20px;
margin: 0 20px;
border: 2px soild #a1a1a1 !important;
}
@media screen and (max-width: 700px) {
.work-content .txt {
max-width: 100%;
margin-bottom: 2rem;
}
}
.inquiry {
text-align: center;
}
.inquiry h3 {
font-size: 30px;
padding: 10px;
color: #666666;
border-top: 1px solid #a1a1a1;
border-bottom: 1px solid #a1a1a1;
}
.inquiry h4 {
margin-top: 4rem;
color: #00993E;
font-size: 20px;
font-weight: bold;
}
.inquiry .figure {
margin-top: 4rem;
}
.inquiry p {
margin-top: 4rem;
}
.btn {
border: 2px solid #00993E;
border-radius: 20px;
}
.btn span {
display: inline-block;
font-size: 20px;
color: #00993E;
padding: 10px 80px;
font-weight: bold;
}
.flex__50 {
display: flex;
justify-content: space-between;
}
@media screen and (max-width: 700px) {
.flex__50 {
flex-direction: column;
align-items: center;
}
}
.flex__50 > div {
width: 49%;
}
@media screen and (max-width: 700px) {
.flex__50 > div {
width: 99%;
margin-top: 9rem;
}
.flex__50 > div:first-child {
margin-top: 0;
}
}
.flex__30 {
display: flex;
justify-content: space-between;
}
@media screen and (max-width: 700px) {
.flex__30 {
flex-direction: column;
align-items: center;
}
}
.flex__30--30 {
width: 30%;
}
@media screen and (max-width: 700px) {
.flex__30--30 {
margin-top: 9rem;
width: 90%;
}
.flex__30--30:first-child {
margin-top: 0;
}
}
.flex__30--70 {
width: 70%;
padding: 0 2rem;
}
@media screen and (max-width: 700px) {
.flex__30--70 {
padding: 0;
width: 90%;
margin-top: 9rem;
}
.flex__30--70:first-child {
margin-top: 0;
}
}
.flex__25 {
display: flex;
justify-content: start;
flex-wrap: wrap;
}
.flex__25 > div {
width: 25%;
text-align: center;
padding-bottom: 4rem;
}
@media screen and (max-width: 700px) {
.flex__25 > div {
width: 50%;
}
}
section {
padding: 9rem 0;
}
.entry-content {
margin-top: 9rem;
}
.wpcf7 {
margin-top: 9rem;
}
.wpcf7 p {
background-color: #f2f2f2;
}
/* --- フォーム全体のスタイル --- */
#cf7-area {
max-width: 800px; /* フォームの最大幅 */
margin: 0 auto; /* 中央寄せ */
padding: 20px;
border: 1px solid #e0e0e0; /* フォーム全体の枠線 */
border-radius: 8px;
background-color: #fcfcfc;
}
.form-heading {
text-align: center;
font-size: 1.2em;
font-weight: bold;
margin-bottom: 30px;
padding-bottom: 15px;
border-bottom: 1px dashed #ddd;
}
/* --- 各フォーム項目のスタイル (横並び) --- */
.cf7-item {
display: flex; /* Flexbox を使用して横並びにする */
align-items: flex-start; /* 上端揃え (項目名と入力欄の高さが違う場合に対応) */
margin-bottom: 25px; /* 各項目間の余白 */
flex-wrap: nowrap; /* デフォルトでは折り返さない */
}
.cf7-q {
flex-shrink: 0; /* 縮まない */
width: 240px; /* 項目名側の固定幅（調整してください） */
padding-right: 20px; /* 質問と回答の間の余白 */
text-align: left;
font-weight: bold;
line-height: 1.6; /* 行の高さ */
}
.cf7-q label { /* ラベル内のテキストに直接スタイルを当てる */
display: inline-block; /* span要素と並ぶように */
padding: 10px 0;
}
.cf7-req { /* 必須マークのスタイル */
display: inline-block;
background-color: #dc3232; /* 赤色 */
color: #fff;
font-size: 0.8em;
padding: 2px 6px;
margin-left: 8px;
border-radius: 3px;
vertical-align: middle; /* テキストの縦位置調整 */
}
.cf7-a {
flex-grow: 1; /* 残りのスペースを埋めるように広がる */
}
/* 入力フィールド全般のスタイル */
.cf7-a input[type=text],
.cf7-a input[type=email],
.cf7-a input[type=tel],
.cf7-a textarea {
width: 100%; /* 親要素 (cf7-a) の幅いっぱいに広げる */
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box; /* パディングとボーダーを含めて幅を計算 */
font-size: 1em;
}
.cf7-a input[type=text]::-moz-placeholder, .cf7-a input[type=email]::-moz-placeholder, .cf7-a input[type=tel]::-moz-placeholder, .cf7-a textarea::-moz-placeholder {
color: #aaa; /* プレースホルダーの文字色 */
}
.cf7-a input[type=text]::placeholder,
.cf7-a input[type=email]::placeholder,
.cf7-a input[type=tel]::placeholder,
.cf7-a textarea::placeholder {
color: #aaa; /* プレースホルダーの文字色 */
}
/* ラジオボタンの調整 */
.cf7-a.--radio {
padding: 10px;
}
.cf7-a .wpcf7-list-item { /* Contact Form 7がラジオボタンの選択肢に付与するクラス */
display: inline-block; /* 横並びにする */
margin-right: 20px; /* 選択肢間の余白 */
white-space: nowrap; /* 折り返しを防ぐ */
}
.cf7-a .wpcf7-list-item-label { /* ラジオボタンのラベルテキスト */
margin-left: 5px; /* ラジオボタン（チェックボックス）とテキストの間の余白 */
}
/* 送信ボタンエリアのスタイル */
.cf7-submit-area {
text-align: center; /* ボタンを中央寄せ */
margin-top: 40px;
}
.cf7-submit-area input[type=submit] {
background-color: #00993E; /* ボタンの背景色 */
color: #fff; /* 文字色 */
padding: 12px 30px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1.1em;
transition: background-color 0.3s ease;
}
.cf7-submit-area input[type=submit]:hover {
background-color: #0056b3; /* ホバー時の背景色 */
}
.form-arrow {
content: "";
width: 100%;
height: 80px;
background: url(../img/img-contact_01.png) center center no-repeat;
}
/* --- スマートフォン表示での縦積み対応 (メディアクエリ) --- */
@media (max-width: 768px) {
#cf7-area {
padding: 15px; /* スマホでの内側の余白 */
}
.cf7-item {
flex-direction: column; /* 縦積みに変更 */
align-items: flex-start; /* 左寄せに戻す */
}
.cf7-q {
width: 100%; /* スマホでは全幅に */
padding-right: 0;
text-align: left; /* 左寄せに戻す */
margin-bottom: 5px; /* 項目名と入力欄の間の縦余白 */
}
.cf7-a {
width: 100%; /* スマホでは全幅に */
}
/* ラジオボタンも縦積みに */
.cf7-a .wpcf7-list-item {
display: block; /* ブロック要素にして縦積みに */
margin-right: 0;
margin-bottom: 8px; /* 各選択肢間に縦方向の余白 */
}
}
input[type=radio] {
opacity: 0;
visibility: hidden;
position: absolute;
}
.wpcf7-list-item.first {
margin-left: 0;
}
span.wpcf7-list-item-label {
position: relative;
display: flex;
align-items: center;
cursor: pointer;
}
span.wpcf7-list-item-label::before {
display: block;
content: "";
border-radius: 50%;
border: 2px solid #00993E;
width: 20px;
height: 20px;
margin-right: 10px;
}
span.wpcf7-list-item-label::after {
display: block;
position: absolute;
content: "";
border-radius: 50%;
width: 12px;
height: 12px;
background-color: #00993E;
left: 4px;
top: 50%;
transform: translateY(-50%);
display: none;
}
input[type=radio]:checked + span.wpcf7-list-item-label::after {
display: block;
}
/* Contact Form 7 acceptance checkbox スタイル */
/* オリジナルのチェックボックスを非表示にする */
.cf7-accept-check .wpcf7-acceptance input[type=checkbox] {
position: absolute; /* 位置指定を絶対位置にする */
opacity: 0; /* 透明にして完全に非表示にする */
width: 0; /* 幅を0にする */
height: 0; /* 高さを0にする */
pointer-events: none; /* クリックイベントも無効にする */
}
/* チェックボックスのカスタムデザイン（外枠）を::beforeで作成 */
.cf7-accept-check .wpcf7-acceptance .wpcf7-list-item-label::before {
content: "";
display: inline-block;
vertical-align: middle; /* テキストと高さを合わせる */
width: 18px; /* 外枠の幅 */
height: 18px; /* 外枠の高さ */
border: 2px solid #ccc; /* 外枠の色と太さ */
border-radius: 3px; /* 角丸 */
margin-right: 8px; /* テキストとの間隔 */
box-sizing: border-box; /* パディングとボーダーを幅と高さに含める */
background-color: #fff; /* 背景色 */
transition: all 0.2s ease-in-out; /* ホバーやチェック時のアニメーション */
}
/* チェックボックスがチェックされた時の外枠の色 */
.cf7-accept-check .wpcf7-acceptance input[type=checkbox]:checked + .wpcf7-list-item-label::before {
border-color: #00993E; /* チェックされた時の枠線の色 */
background-color: #00993E; /* チェックされた時の背景色 */
}
/* チェックマーク（::after） */
.cf7-accept-check .wpcf7-acceptance input[type=checkbox]:checked + .wpcf7-list-item-label::after {
content: "✓"; /* チェックマークのユニコード文字 (✓) */
font-size: 14px; /* チェックマークのサイズ */
color: #fff; /* チェックマークの色 */
position: absolute; /* 親要素（labelまたはwpcf7-list-item-label）を基準に配置 */
left: 4px; /* チェックボックスの中心に寄せるための調整 */
top: 50%; /* 上から中央に */
transform: translateY(-50%); /* 中央揃えの最終調整 */
/* ラジオボタンの::afterと共通の配置ロジックがあれば調整 */
}
/* ラベル全体がクリックできるようにカーソルを指定 */
.cf7-accept-check .wpcf7-acceptance label {
cursor: pointer;
position: relative; /* ::after の配置基準にする */
display: flex; /* チェックボックスとテキストを横並びにするため */
align-items: center; /* 垂直方向の中央揃え */
}
/* プライバシーポリシーリンクの段落 */
.cf7-accept-check p {
font-size: 0.9em; /* フォントサイズを少し小さく */
}
.wpcf7 form .wpcf7-response-output {
margin: 0.5em 0.5em 1em !important;
border: 4px solid #00993E;
text-align: center;
}/*# sourceMappingURL=common.css.map */