@charset "UTF-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-style: normal;
/* vertical-align: baseline; */
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
input[type="text"],
input[type="password"],
textarea,
select,*:focus {
outline: none;
}
dd {
margin: 0;
}
/*====================================================
////id | common
====================================================*/
/* noto-sans-jp-500 - japanese */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 500;
src: url('./fonts/noto-sans-jp-v54-japanese-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-jp-700 - japanese */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 700;
src: url('./fonts/noto-sans-jp-v54-japanese-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-serif-jp-500 - japanese */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Noto Serif JP';
font-style: normal;
font-weight: 500;
src: url('./fonts/noto-serif-jp-v31-japanese-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-serif-jp-700 - japanese */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Noto Serif JP';
font-style: normal;
font-weight: 700;
src: url('./fonts/noto-serif-jp-v31-japanese-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
html{
font-size: 10px;
font-size: 62.5%;
width: 100%;
max-width: 100vw;
}
:root {
--mainColor: #4EC1B7;
--red: #ff0000;
--w_gray: #F5F6F6;
--l_gray: #F1F1F1;
--gray: #B2B2B2;
--gray2: #D0D0D0;
--d_gray: #888;
--black: #1a1a1a;
--font_family: "Noto Sans JP", "Yu Gothic", "游ゴシック Medium", "YuGothic", "游ゴシック体", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
--font_serif: "Noto Serif JP", "Yu Gothic", "游ゴシック Medium", "YuGothic", "游ゴシック体", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}
#golf31_body, button, input, select, optgroup, textarea {
color: var(--black);
font-family: var(--font_family);
font-size: min(3.75vw, 16px);
font-size: min(3.75vw, 1.6rem);
font-weight: 400;
line-height: 1.6;
}
button, input, select, optgroup, textarea {
color: inherit;
font-family: inherit;
font-size: inherit;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
}
body {
background: #fff;
letter-spacing: .02em;
position: relative;
width: 100%;
height: auto;
}
* {
min-height:0;
min-width : 0;
}
body * {
box-sizing: border-box;
}
body.scroll-lock {
position: fixed;
overflow: hidden;
width: 100%;
}
section {
position: relative;
max-width: 100vw;
z-index: 2;
}
a {
display: inline-block;
color: inherit;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
cursor: pointer;
outline:none;
position: relative;
text-decoration: none;
transition: 0.2s ease-in-out;
/* vertical-align: middle; */
}
.tel_link a {
color: inherit !important;
text-decoration: none !important;
}
img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
display: block;
/* margin: auto; */
}
figure {
margin: 0;
position: relative;
}
figure img {
position: relative;
}
.coverImg {
overflow: hidden;
padding-top: 54%;
width: 100%;
}
figure.coverImg img {
margin: auto;
-o-object-fit: cover;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
max-width: none;
height: 100%;
max-height: none;
}
figure.coverImg.contain img {
-o-object-fit: contain;
object-fit: contain;
}
figure figcaption.noImage {
background: #f2faff;
color: var(--red);
display: flex;
align-items: center;
justify-content: center;
font-size: 2.0rem;
font-weight: bold;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.scaleUpImg figure {
overflow: hidden;
}
.scaleUpImg figure {
transition: .2s ease-in-out;
}
#contents {
width: 100%;
transition: .2s ease-in-out;
position: relative;
z-index: 1;
}
.innerBox{
margin: 0 auto;
padding: min(12vw, 130px) 0 min(20vw, 200px);
position: relative;
width: 90%;
max-width: 1200px;
z-index: 2;
}
.innerBox.shortPadding {
padding: min(10vw, 70px) 0;
}
.innerBox .innerBox {
width: 100%;
}
.block {display: block;}
.inb {display: inline-block;}
input[type="radio"], input[type="checkbox"] {
display: none;
}
.hidden {
display: none;
}
::before, ::after {
pointer-events: none;
}
.f-serif {
font-family: var(--font_serif);
}
.f-serif_en {
font-family: "PT Serif", serif;
}
.fw-bold {
font-weight: 700;
}
ul.markList li {
position: relative;
padding-left: 1.0em;
line-height: 1.3;
}
ul.markList > li + li,
ul.normal > li + li {
margin: .2em 0 0;
}
ul.markList li::before {
content: '\30FB';
display: block;
margin: auto;
position: absolute;
top: 0;
left: 0;
width: 1em;
height: 1em;
}
ul.markList > li:after {
display: none !important;
}
ul.markList.attentionMark > li:before {
background: transparent;
content: '\203B';
top: .1em;
left: 0;
}
ul.markList.dot li:before {
background: var(--mainColor);
border-radius: 100%;
content: '';
top: .5em;
left: .3em;
width: .4em;
height: .4em;
}
.underline {
-webkit-text-decoration: underline dotted 1px;
text-decoration: underline dotted 1px;
text-underline-position: under;
text-underline-offset: 0.1em;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
.hidden-mob {
display: none;
}
.display-mob {
display: block;
}
.innerBox{
padding: min(15vw, 80px) 0;
}
figure figcaption.noImage {
font-size: 1.6rem;
}
.whiteBox {
}
.flexColumn-mob ,
.flexColumn-tab {
flex-direction: column;
}
dl.gridBox.responsive ,
dl.formItem {
grid-template: 'dt' 'dd';
}
dl.gridBox.responsive dd ,
dl.formItem dd {
grid-column: 1;
}
}
@media screen and (max-width:500px) {
.hidden-small {
display: none;
}
.display-small {
display: block;
}
}
@media screen and (max-width: 1060px) {
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
.hidden-pc_d-tab,
.hidden-pc {
display: none;
}
}
/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {
.flexColumn-tab {
flex-direction: column;
}
.hidden-tab {
display: none;
}
.hidden-pc_d-tab ,
.display-tab {
display: block;
}
}
@media screen and (min-width:960px) and (max-width:1300px) {
.display-small_pc {
display: block;
}
}
@media screen and (min-width:1550px) {
.hidden-wide {
display: none;
}
.display-wide {
display: block;
}
}
/*====================================================
//class .sa
====================================================*/
.sa {
opacity: 0;
}
.sa.show {
animation: .6s ease-in-out forwards sa-show;
}
@keyframes sa-show {
to {
opacity: 1;
transform: none;
}
}
.sa.show_after {
opacity: 1;
transform: none;
transition: 0s;
}
.sa-lr {
transform: translate(calc(min(7vw, 40px) * -1), 0);
}
.sa-rl {
transform: translate(min(7vw, 40px), 0);
}
.sa-up {
transform: translate(0, min(7vw, 40px));
}
/*====================================================
////id | 装飾
====================================================*/
.arrow {
background: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
display: inline-block;
transition: .3s ease-in-out;
width: 1em;
height: 1em;
}
.tel_icon {
background: url('data:image/svg+xml;charset=UTF-8,') no-repeat center left;
background-size: .8em .8em;
line-height: 1em;
padding-left: 1em;
}
.linkBtn {
background: linear-gradient(to bottom, #e50012, #320000);
border-radius: 3em;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
gap: min(1.5vw, 30px);
line-height: 1.4;
min-height: 3em;
padding: .3em 1em;
position: relative;
text-align: center;
transition: .3s ease-in-out;
}
.linkBtn::before {
background: linear-gradient(to right, #c68903, #f3da8b, #f8f2e4, #f8f2e4, #f3da8b, #c68903);
border-radius: calc(3em + 2px);
content: '';
display: block;
margin: auto;
position: absolute;
top: -2px;
left: -3px;
right: -3px;
bottom: -2px;
width: calc(100% + 6px);
height: calc(100% + 4px);
z-index: -1;
}
.square_dot {
padding-bottom: min(7vw, 25px);
position: relative;
text-align: center;
}
.square_dot::after {
background: url('../images/golf31/square_deco.svg') no-repeat left bottom;
content: '';
background-size: min(20vw, 100px) 11px;
display: block;
margin: auto;
position: absolute;
bottom: 0;
left: calc(50% - min(10vw, 50px));
width: 0;
height: 15px;
}
.square_dot.show::after {
animation: 1.2s .6s ease-in-out forwards square_dot;
}
@keyframes square_dot {
0%, 20% {
width: calc(min(20vw, 100px) / 5);
}
20%, 40% {
width: calc(min(20vw, 100px) / 5 * 2);
}
40%, 60% {
width: calc(min(20vw, 100px) / 5 * 3);
}
60%, 80% {
width: calc(min(20vw, 100px) / 5 * 4);
}
80%, 100% {
width: min(20vw, 100px);
}
}
h2.square_dot {
border: none;
font-family: var(--font_serif);
font-size: min(7vw, 4rem);
font-weight: 700;
line-height: 1.4;
margin-bottom: .8em;
}
.bg-leather {
background: url('../images/golf31/bg-leather.webp') repeat-y top center;
background-size: 100% auto;
color: #fff;
}
.tel_no {
text-decoration: none !important;
}
.main_text {
text-align: center;
margin-bottom: min(7vw, 80px);
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
.main_text {
font-size: min(4.2vw, 2rem);
}
.linkBtn::before {
width: calc(100% + 4px);
height: calc(100% + 2px);
}
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
h2.square_dot {
font-size: min(5vw, 6rem);
}
.main_text {
font-size: min(2.4vw, 2.2rem);
}
}
@media screen and (min-width:769px) and (max-width:960px) {
}
@media screen and (min-width: 1330px) {
.main_text p {
font-size: 2.4rem;
}
}
@media (hover: hover) {
.linkBtn:hover {
background: linear-gradient(to bottom, #ff1024, #700404);
color: #fff;
}
.linkBtn:hover .arrow {
transform: translateX(min(.2em, 8px));
}
}
/*====================================================
////id 【header】
====================================================*/
header {
transition: .2s ease-in-out;
}
header .headerBox {
background: rgba(0, 0, 0, .8);
position: fixed;
top: 0;
left: 0;
transition: .4s ease-in-out;
width: 100%;
z-index: 9999;
}
header.hide .headerBox {
transform: translateY(-130px);
}
header .header-inner {
display: grid;
align-items: center;
grid-template-columns: auto 1fr;
height: 100%;
max-width: none;
padding: 0 min(5vw, 40px);
width: 100%;
}
header .logo_img-link {
display: block;
}
header img {
margin: 0;
}
header .menu-outer {
position: relative;
z-index: 30;
}
header .menuBtn {
background: #fff;
border-radius: 3px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 8px;
right: 8px;
transition: .2s ease-in-out;
width: 44px;
height: 44px;
z-index: 10;
}
header .menuBtn .humberger {
margin: 0;
position: relative;
transition: .2s ease-in-out;
width: 63%;
height: 40%;
}
header .menuBtn .humberger span {
border-top: solid 3px var(--black);
content: '';
margin: auto;
opacity: 1;
position: absolute;
top: 0;
bottom: 0;
left: 0;
transition: .4s ease-in-out;
width: 100%;
height: 0;
}
header .menuBtn .humberger span:nth-child(1) {
transform: translateY(-8px);
}
header .menuBtn .humberger span:nth-child(2) {
}
header .menuBtn .humberger span:nth-child(3) {
transform: translateY(8px);
}
header .maskBox {
background: transparent;
backdrop-filter: blur(3px);
opacity: 0;
pointer-events: none;
position: fixed;
bottom: 0;
left: 0;
transition: .5s ease-in-out;
width: 100%;
height: calc(100vh - 60px);
height: calc(100svh - 60px);
z-index: 10;
}
header .menuBox {
background: rgba(0, 0, 0, .8);
color: #fff;
opacity: 0;
overflow-y: auto;
padding: 80px min(5vw, 25px) 60px;
pointer-events: none;
position: fixed;
top: 60px;
right: -500px;
transition: .5s ease-in-out;
width: 80%;
max-width: 500px;
height: calc(100vh - 60px);
z-index: 1;
overflow-y: scroll;
-ms-overflow-style: none; /* IE, Edge 対応 */
scrollbar-width: none; /* Firefox 対応 */
}
header .menuBox::-webkit-scrollbar { /* Chrome, Safari 対応 */
display:none;
}
header .menu-outer.open .menuBtn {
transition: .2s ease-in-out;
}
header .menu-outer.open .humberger span {
right: 0;
}
header .menu-outer.open .humberger span:nth-child(1) {
bottom: 0;
transform: rotate(-135deg);
}
header .menu-outer.open .humberger span:nth-child(2) {
width: 0;
opacity: 0;
}
header .menu-outer.open .humberger span:nth-child(3) {
top: 0;
transform: rotate(135deg);
}
.menu-open header .maskBox {
opacity: 1;
pointer-events: auto;
}
header .menu-outer.open .menuBox {
pointer-events: auto;
right: 0;
opacity: 1;
}
header .menuBox .menuBox-inner {
}
header .menuBox ul {
}
header .menu-outer .menu-pc {
display: none;
}
header .menuBox .menu li {
padding: 0;
position: relative;
width: 100%;
}
header .menuBox .menu li a {
/* display: block; */
position: relative;
}
.header-menu-tel {
display: flex;
align-items: center;
flex-direction: column;
gap: 3px;
}
.header-menu-tel .open_time {
font-size: .6em;
}
.menuBox .header-menu-cta {
display: grid;
grid-gap: min(5vw, 30px);
margin-top: min(5vw, 30px);
}
.menuBox .header-menu-tel {
font-size: min(8vw, 2.6rem);
}
.menuBox .header-menu-ctaBtn .linkBtn {
font-size: min(5vw, 2.2rem);
}
/* ////////// mobile ////////// NOTE header mobile */
@media screen and (max-width: 959.8px) {
header .headerBox {
height: 60px;
}
header.hide {
top: -130px;
}
header .logo_text {
font-size: 12px;
}
header .logo_img {
height: 40px;
}
header .pc_menu {
display: none;
}
header .menuBtn .humberger::before,
header .menuBtn .humberger::after {
width: 5px;
height: 100%;
}
header .menu-outer.open .humberger::before {
left: -3px;
}
header .menu-outer.open .humberger::after {
right: -3px;
}
header .menuBtn .text {
transform: scale(.8);
}
header .menuBox::before {
content: '';
display: block;
margin: auto;
position: absolute;
top: -1px;
left: 0;
width: 100%;
height: 1px;
}
header .menuBox {
padding: 40px min(5vw, 30px) 30px;
}
header .menuBox .menu_logo img {
height: 2.5em;
}
header .menuBox .menu-wrapper {
align-items: flex-start;
}
header .menuBox .menu-wrapper > div{
width: 100%;
}
header .menuBox .menu > li {
position: relative;
text-align: left;
}
header .menuBox .menu:not(.sub-menu) a {
display: block;
padding: .8em 0;
border-bottom: solid 1px var(--gray2);
}
header .menuBox .menu .sub-menu {
display: grid;
padding-bottom: 1em;
}
header .menuBox .menu .sub-menu a {
display: block;
}
header .btnBox {
grid-gap: .5em;
}
}
@media screen and (max-width:560px) {
header .menuBox {
width: 100%;
right: -100%;
}
}
@media screen and (max-width:500px) {
}
@media screen and (min-width:769px) and (max-width:959.8px) {
.menu-open .header_logo a {
filter: none;
}
header .menuBox {
width: 500px;
}
}
/* ////////// PC ////////// NOTE header PC */
@media print, screen and (min-width: 769px) {
}
@media print, screen and (min-width: 960px) {
header .headerBox {
backdrop-filter: blur(3px);
position: fixed;
left: 0;
right: 0;
transition: .4s ease-in-out;
width: 100%;
height: 100px;
z-index: 9000;
}
.header-inner {
}
header.global .headerBox:hover::before {
opacity: 1;
}
header.hide {
top: -180px;
}
header .logo_img {
width: min(13vw, 200px);
}
header .header_logo a:hover {
color: inherit;
}
header .pc_menu {
display: flex;
align-items: center;
gap: min(2vw, 50px);
justify-content: flex-end;
}
header .pc_menu .menu {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
grid-gap: .2em min(1.5vw, 60px);
font-size: min(1.2vw, 1.6rem);
font-weight: 700;
margin: 0;
height: 100%;
padding: 0;
}
header .pc_menu .menu > .menu-item {
display: flex;
align-items: center;
}
header .pc_menu .menu > .menu-item > a {
color: #fff;
padding: .2em 0;
position: relative;
}
header .pc_menu .menu > .menu-item > a:hover {
opacity: 1;
}
header .pc_menu .menu > .menu-item > a::before {
border-bottom: solid 2px #fff;
content: '';
display: block;
margin: auto;
position: absolute;
right: 0;
bottom: 0;
transition: .2s ease-in-out;
width: 0;
height: 0;
z-index: -1;
}
header .pc_menu .menu > .menu-item > a:hover::before {
opacity: 1;
left: 0;
right: auto;
width: 100%;
}
.pc_menu .header-menu-cta {
display: flex;
align-items: center;
gap: min(2vw, 25px);
}
.pc_menu .header-menu-tel {
color: #fff;
font-size: min(1.8vw, 2.4rem);
line-height: 1.4;
}
.pc_menu .header-menu-ctaBtn .linkBtn {
font-size: min(1.3vw, 1.6rem);
gap: .5em;
height: min(4.5vw, 60px);
}
header .menuBtn ,
header .menu-outer {
display: none;
}
header .menuBox {
width: 450px;
height: 100vh;
height: 100dvh;
}
}
@media screen and (min-width:1400px) {
.pc_menu .header-menu-ctaBtn .linkBtn {
width: 260px;
}
}
@media (hover: hover) {
header .menuBox a:hover {
color: var(--orange);
}
}
/*====================================================
////id | mv
====================================================*/
#mv {
color: #fff;
padding-top: 60px;
position: relative;
z-index: 100;
}
.mv-inner {
padding: min(10vw, 70px) 0;
}
.mv-head-wrapper {
position: relative;
}
.mv-head {
font-weight: 700;
line-height: 1.6;
margin-bottom: 1em;
text-align: center;
text-shadow: 0 0 .1em #000, 0 0 .1em #000;
}
.mv-head-sticker {
margin: auto;
position: absolute;
}
.mv-head-add_sticker {
position: absolute;
top: 5%;
right: calc(min(4vw, 80px) * -1);
width: 52%;
}
.mv-text {
text-align: center;
text-shadow: 0 0 .1em #000, 0 0 .1em #000, 0 0 .1em #000;
}
.mv-text p {
line-height: 1.6;
margin-bottom: 1.8em;
}
.mv-feature-wrapper {
display: flex;
flex-wrap: wrap;
gap: min(1.2vw, 20px) min(1.5vw, 30px);
justify-content: center;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 960px) {
#mv {
/* min-height: 100vh;
min-height: 100svh; */
background: url('../images/golf31/mv-bg-mob.webp') no-repeat center / cover;
}
.mv-inner {
max-width: 750px;
}
.mv-head-wrapper {
padding-top: 8vw;
}
.mv-head {
font-size: min(7vw, 4.5rem);
text-align: left;
}
.mv-head-sticker {
top: calc(min(8vw, 40px) * -1);
right: -4.5vw;
}
.mv-head-sticker .main_sticker {
width: min(30vw, 240px);
}
.mv-head-add_sticker {
top: -6%;
left: calc(min(6vw, 100px) * -1);
right: auto;
transform: rotate(-30deg);
}
.mv-text {
font-size: min(4.5vw, 2.2rem);
text-align: left;
}
.mv-feature {
width: min(42vw, 360px);
}
}
@media screen and (max-width: 769px) {
.mv-head-sticker .main_sticker {
width: min(28vw, 180px);
}
.mv-feature {
width: min(90%, 400px);
}
}
@media screen and (max-width: 600px) {
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 960px) {
#mv {
background: url('../images/golf31/mv-bg-pc.webp') no-repeat center / cover;
}
.mv-head-wrapeer {
padding: 0 min(22vw, 330px);
}
.mv-head {
font-size: min(4vw, 5rem);
}
.mv-head-sticker {
top: -60px;
right: 0;
}
.mv-head-sticker .main_sticker {
width: min(22vw, 300px);
}
.mv-text {
font-size: min(2.2vw, 2.6rem);
}
.mv-feature {
flex: 1;
}
}
@media screen and (min-width: 960px) {
#mv {
padding-top: 100px;
}
}
@media screen and (min-width: 1330px) {
}
@media screen and (min-width: 1600px) {
.mv-head-sticker {
right: -100px;
}
.mv-head-sticker .main_sticker {
width: 350px;
}
}
@media (hover: hover) {}
/*====================================================
////id | main_cta
====================================================*/
#main_cta {
position: relative;
z-index: 100;
}
.main_cta {
background: rgba(0, 0, 0, .8);
color: #fff;
position: relative;
width: 100%;
z-index: 100;
}
.main_cta-inner {
padding: min(4vw, 30px) 0;
width: 95%;
}
.main_cta-text {
text-align: center;
}
.main_cta-text p {
display: inline-block;
line-height: 1.4;
margin: -.2em 0 1em;
padding: 0 1.2em;
position: relative;
}
.main_cta-text p::before,
.main_cta-text p::after {
border-left: solid 1px;
content: '';
display: block;
margin: auto;
position: absolute;
bottom: .2em;
transform-origin: right bottom;
width: 0;
height: 1.2em;
}
.main_cta-text p::before {
left: 1em;
transform: rotate(-45deg);
}
.main_cta-text p::after {
right: 1em;
transform: rotate(45deg);
}
.main_cta-item-wrapper {
display: grid;
grid-gap: min(2vw, 40px);
grid-template-columns: 1fr 1fr;
}
.main_cta-item {
gap: min(1.5vw, 30px);
min-height: min(10vw, 96px);
padding: .1em .5em;
}
.main_cta-item.tel {
background: #000;
font-size: min(4.5vw, 4rem);
}
.main_cta-item.tel_linkBtn > span {
display: grid;
}
.main_cta-item.tel_linkBtn .open_time {
margin-top: .2em;
font-size: .4em;
}
.main_cta-item.mail {
font-size: min(3.5vw, 3rem);
}
.main_cta-item .arrow {
width: min(3vw, 30px);
height: min(3vw, 30px);
}
#fixed_cta {
position: relative;
}
#fixed_cta .main_cta {
position: fixed;
bottom: -250px;
transition: .4s ease-in-out;
}
#fixed_cta.show .main_cta {
bottom: 0;
}
#fixed_cta.hide .main_cta {
position: absolute;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
/* .fixed .main_cta {
position: fixed;
bottom: 0;
left: 0;
transition: .3s ease-in-out;
}
.fixed.hide .main_cta {
bottom: -150px;
} */
.main_cta-text p {
font-size: min(3.6vw, 1.8rem);
}
.main_cta-text p::before {
bottom: .2em;
height: 2.2em;
transform: rotate(-25deg);
}
.main_cta-text p::after {
bottom: .2em;
height: 2.2em;
transform: rotate(25deg);
}
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
.main_cta-text p {
font-size: min(2.4vw, 2.4rem);
}
}
@media screen and (min-width: 1330px) {
.main_cta-item.tel {
font-size: 5rem;
padding: .1em 1em;
}
.main_cta-item.mail {
font-size: min(3.5vw, 3.4rem);
}
}
@media (hover: hover) {
.main_cta-item.tel:hover .arrow {
transform: none;
}
}
/*====================================================
////id | feature
====================================================*/
.feature-detail {
display: grid;
grid-gap: min(5vw, 30px) min(4vw, 70px);
}
.feature-coverImg {
border-radius: min(2vw, 30px);
height: 100%;
}
.feature-item-wrapper {
display: grid;
grid-gap: min(5vw, 40px);
}
.feature-item {
border-left: solid 1.11em;
line-height: 1.4;
padding-left: 10px;
}
.feature-item dt {
font-size: 1.35em;
font-weight: 700;
}
.feature-item dd {
margin: .6em 0 0;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 960px) {
.feature-coverImg {
padding-top: 80%;
}
.feature-text {
display: flex;
justify-content: center;
}
.feature-item {
border-left: solid 0.8em;
}
.feature-item dt {
font-size: 1.2em;
}
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 960px) {
.feature-detail {
grid-template-columns: min(40vw, 580px) auto;
place-content: center;
}
.feature-coverImg {
padding-top: 100%;
}
.feature-text {
display: flex;
align-items: center;
}
.feature-item {
font-size: min(1.5vw, 1.8rem);
}
}
@media (hover: hover) {}
/*====================================================
////id | media
====================================================*/
.media-video {
border-radius: min(4vw, 30px);
margin: auto;
overflow: hidden;
width: min(90%, 800px);
}
.media-video video {
width: 100%;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
}
@media (hover: hover) {}
/*====================================================
////id | reason
====================================================*/
#reason {
background: #709659;
color: #fff;
}
.reason-item-wrapper {
display: grid;
grid-gap: min(2vw, 30px);
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
margin-top: min(8vw, 80px);
}
.reason-item {
background: #fff;
border: solid 2px #fff;
border-radius: min(2.5vw, 25px);
color: var(--black);
overflow: hidden;
}
.reason-coverImg {
padding-top: min(60%, 250px);
}
.reason-item-text {
padding: 15px 25px;
}
.reason-item dt {
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
line-height: 1.4;
min-height: 3.5em;
padding-bottom: 20px;
text-align: center;
}
.reason-item dd {
margin-top: 1em;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
.reason-item-wrapper {
grid-gap: min(4vw, 30px) min(2vw, 30px);
}
.reason-item dt {
font-size: 1.2em;
}
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
.reason-item dt {
font-size: 1.8rem;
}
}
@media screen and (min-width: 1330px) {
.reason-item dt {
font-size: 2rem;
}
}
@media (hover: hover) {}
/*====================================================
////id | voice
====================================================*/
.voice-item-wrapper {
display: grid;
grid-gap: min(7vw, 60px) min(2vw, 25px);
margin: min(8vw, 80px) auto 0;
}
.voice-item-balloon {
background: #fff;
border: solid 2px;
border-radius: min(2vw, 20px);
height: 100%;
padding: .8em 1em 1em;
position: relative;
}
.voice-item-balloon::before,
.voice-item-balloon::after {
content: '';
display: block;
margin: auto;
position: absolute;
}
.voice-item-balloon::before {
background: var(--black);
z-index: -1;
}
.voice-item-balloon::after {
background: #fff;
}
.voice-item-text .name {
font-size: .8em;
margin-top: 1.5em;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
.voice-item-wrapper {
max-width: 540px;
}
.voice-item {
display: flex;
align-items: center;
gap: min(5vw, 20px);
font-size: min(3.9vw, 1.8rem);
}
.voice-item:nth-child(even) {
flex-direction: row-reverse;
}
.voice-item-text {
flex: 1;
}
.voice-item-balloon::before,
.voice-item-balloon::after {
clip-path: polygon(0 0, 100% 50%, 0 100%);
top: 0;
left: 100%;
bottom: 8%;
width: min(4vw, 20px);
height: min(7vw, 35px);
}
.voice-item-balloon::after {
transform: translateX(-2.5px);
}
.voice-item:nth-child(even) .voice-item-balloon::before,
.voice-item:nth-child(even) .voice-item-balloon::after {
clip-path: polygon(100% 0, 100% 100%, 0 50%);
left: auto;
right: 100%;
}
.voice-item:nth-child(even) .voice-item-balloon::after {
transform: translateX(2.5px);
}
.voice-item-img {
width: min(20vw, 120px);
}
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
.voice-item-wrapper {
grid-template-columns: repeat(4, 1fr);
}
.voice-item {
display: grid;
grid-gap: min(7vw, 90px);
grid-template-rows: subgrid;
grid-row: span 2;
font-size: min(1.7vw, 1.8rem);
}
.voice-item:nth-child(even) .voice-item-text,
.voice-item:nth-child(even) .voice-item-img {
transform: translateY(60px);
}
.voice-item-balloon::before,
.voice-item-balloon::after {
clip-path: polygon(0 0, 100% 0, 50% 100%);
top: 100%;
left: 0;
right: 0;
width: min(4.5vw, 50px);
height: min(2.5vw, 30px);
}
.voice-item-balloon::after {
transform: translateY(-2.5px);
}
.voice-item-img figure {
margin: auto;
width: min(65%, 200px);
}
.voice-item:nth-child(3) figure {
transform: translateX(20px);
}
}
@media screen and (min-width:769px) and (max-width:960px) {
.voice-item-wrapper {
grid-template-columns: repeat(2, 1fr);
}
.voice-item {
font-size: min(2.2vw, 1.8rem);
}
.voice-item-img figure {
width: min(65%, 150px);
}
}
@media (hover: hover) {}
/*====================================================
////id | plan
====================================================*/
.plan-item-wrapper {
display: grid;
grid-gap: min(5vw, 30px) min(3vw, 60px);
margin: min(8vw, 80px) auto 0;
max-width: 1140px;
}
.plan-item-head {
border-radius: min(1.5vw, 15px) min(1.5vw, 15px) 0 0;
color: #fff;
font-weight: 700;
line-height: 1;
padding: .4em;
text-align: center;
width: 70%;
min-width: 12em;
}
.plan-item-detail {
background: #000;
border: solid 2px;
border-radius: 0 min(1vw, 12px) min(1vw, 12px) min(1vw, 12px);
padding: 8px min(5vw, 60px);
}
.plan-item-detail dl {
display: flex;
align-items: center;
padding: 13px 0;
}
.plan-item-detail dl + dl {
border-top: solid 2px;
}
.plan-item-detail dt {
}
.plan-item-detail dd {
flex: 1;
font-weight: 700;
text-align: right;
}
.plan-item-detail dd .big {
font-size: 2em;
line-height: 1;
}
.plan-item:nth-child(1) .plan-item-head {
background: #b9272d;
}
.plan-item:nth-child(1) .plan-item-detail ,
.plan-item:nth-child(1) .plan-item-detail dl + dl {
border-color: #b9272d;
}
.plan-item:nth-child(2) .plan-item-head {
background: #ef8b1e;
}
.plan-item:nth-child(2) .plan-item-detail ,
.plan-item:nth-child(2) .plan-item-detail dl + dl {
border-color: #ef8b1e;
}
.plan-other {
margin: min(5vw, 50px) auto 0;
max-width: 1140px;
}
.plan-other p {
font-size: min(4.2vw, 2.4rem);
margin-bottom: .8em;
}
.plan-other .markList {
margin-top: 1em;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
.plan-item-wrapper {
max-width: 500px;
}
.plan-item-head {
font-size: min(5vw, 2.6rem);
}
.plan-item-detail {
font-size: min(4vw, 2.0rem);
}
.plan-other {
max-width: 500px;
}
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
.plan-item-wrapper {
grid-template-columns: 1fr 1fr;
}
.plan-item-head {
font-size: min(2.5vw, 3rem);
}
.plan-item-detail {
font-size: min(2.2vw, 2.4rem);
padding: 5px min(2.5vw, 60px);
}
}
@media screen and (min-width: 1330px) {
.plan-item-detail {
padding: 5px 60px;
}
}
@media (hover: hover) {}
/*====================================================
////id | flow
====================================================*/
.flow-item-wrapper {
display: flex;
flex-wrap: wrap;
gap: 25px 0;
}
.flow-item {
border: solid 2px;
border-radius: 10px;
position: relative;
}
.flow-item::before {
content: '';
display: block;
margin: auto;
position: absolute;
}
.flow-item-no {
color: #fff;
border-radius: 8px 0 10px 0;
display: flex;
align-items: center;
justify-content: center;
width: 1.75em;
height: 1.75em;
}
.flow-item-text dt {
font-weight: 700;
line-height: 1.4;
text-align: center;
}
.flow-item-text dd {
padding: 0 1em .8em;
}
.flow-item:nth-child(1) {
border-color: #e51c24;
}
.flow-item:nth-child(1) .flow-item-no {
background: #e51c24;
}
.flow-item:nth-child(1) dt {
color: #e51c24;
}
.flow-item:nth-child(2) {
border-color: #e95a24;
}
.flow-item:nth-child(2)::before,
.flow-item:nth-child(2) .flow-item-no {
background: #e95a24;
}
.flow-item:nth-child(2) dt {
color: #e95a24;
}
.flow-item:nth-child(3) {
border-color: #ef8b1e;
}
.flow-item:nth-child(3)::before,
.flow-item:nth-child(3) .flow-item-no {
background: #ef8b1e;
}
.flow-item:nth-child(3) dt {
color: #ef8b1e;
}
.flow-item:nth-child(4) {
border-color: #f3a83b;
}
.flow-item:nth-child(4)::before,
.flow-item:nth-child(4) .flow-item-no {
background: #f3a83b;
}
.flow-item:nth-child(4) dt {
color: #f3a83b;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
.flow-item-wrapper {
max-width: 500px;
margin: auto;
}
.flow-item {
transform: translateY(30px);
width: 100%;
}
.flow-item::before {
clip-path: polygon(0 0, 100% 0, 50% 100%);
top: -18px;
left: 0;
right: 0;
width: 30px;
height: 11px;
}
.flow-item-no {
font-size: min(8vw, 3rem);
}
.flow-item-text dt {
font-size: min(5.5vw, 2rem);
margin: -.2em 0 1em;
}
.flow-item-text dd {
padding: 0 1.2em 2em;
}
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
.flow-item {
width: calc(50% - 50px);
}
.flow-item {
transform: translateX(-30px);
}
.flow-item.show:nth-child(2) {
animation-delay: .3s;
}
.flow-item.show:nth-child(3) {
animation-delay: .6s;
}
.flow-item.show:nth-child(4) {
animation-delay: .9s;
}
.flow-item::before {
clip-path: polygon(0 0, 100% 50%, 0 100%);
top: 0;
left: -18px;
bottom: 0;
width: 11px;
height: 30px;
}
.flow-item + .flow-item {
margin-left: 25px;
}
.flow-item:nth-child(3) {
margin-left: 75px;
}
.flow-item-no {
font-size: min(4vw, 4rem);
}
.flow-item-text dt {
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
margin: -.2em 0 1em;
min-height: 3.2em;
}
}
@media screen and (min-width: 960px) {
.flow-item {
flex: 1;
}
.flow-item:nth-child(3) {
margin-left: 25px;
}
}
@media (hover: hover) {}
/*====================================================
////id | faq
====================================================*/
#faq {
border-top: solid 1px var(--black);
}
.faq-item-wrapper {
display: grid;
grid-gap: min(5vw, 60px);
margin: auto;
max-width: 1050px;
}
.faq-item {
background: #fff;
border-radius: 12px;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
padding: min(4vw, 25px);
}
.faq-item dt ,
.faq-item dd {
display: grid;
align-items: baseline;
gap: min(2vw, 20px);
}
.faq-item dt {
padding-bottom: min(4vw, 20px);
}
.faq-item dd {
background-image : linear-gradient(to right, #c4c4c4 10px, transparent 10px);
background-size: 20px 2px;
background-repeat: repeat-x;
background-position: left top;
padding-top: min(4vw, 20px);
}
.faq-item .alphabet {
display: block;
line-height: 1;
transform: translateY(.1em);
}
.faq-item dt .alphabet {
color: #008a45;
font-weight: 400;
}
.faq-item dd .alphabet {
color: #e51c24;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
.faq-item dt ,
.faq-item dd {
grid-template-columns: min(6vw, 3rem) 1fr;
}
.faq-item dt {
font-size: 1.1em;
}
.faq-item dd {
background-image : linear-gradient(to right, #c4c4c4 8px, transparent 8px);
background-size: 16px 1px;
}
.faq-item .alphabet {
font-size: min(6vw, 3rem);
}
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
.faq-item dt ,
.faq-item dd {
grid-template-columns: min(4vw, 4rem) 1fr;
}
.faq-item dt {
font-size: min(2.2vw, 2.2rem);
}
.faq-item dd {
font-size: min(1.8vw, 1.8rem);
}
.faq-item .alphabet {
font-size: min(4vw, 4rem);
}
}
@media (hover: hover) {}
/*====================================================
////id | access
====================================================*/
#access {
background: url('../images/golf31/access-bg.webp') no-repeat center / cover;
color: #fff;
}
.access-detail {
display: grid;
grid-gap: min(6vw, 50px) min(5vw, 50px);
}
.access-map {
border-radius: 10px;
overflow: hidden;
position: relative;
min-height: 300px;
}
.access-map iframe {
margin: auto;
position: absolute;
/* top: -200px; */
width: 100%;
height: 100%;
/* height: calc(100% + 400px); */
}
.access-text > div {
display: grid;
grid-gap: min(2vw, 14px);
}
.access-text dl {
display: grid;
grid-template-columns: 4em 1fr;
grid-column: span 2;
grid-gap: min(3vw, 30px);
line-height: 1.4;
}
.access-text dt {
font-weight: 400;
}
.access-text .attentionMark {
font-size: .7em;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
.access-text {
font-size: min(4.2vw, 1.8rem);
}
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
.access-detail {
grid-template-columns: 1fr 1fr;
}
.access-text {
display: flex;
align-items: center;
font-size: min(2vw, 2rem);
}
}
@media (hover: hover) {}
/*====================================================
////id | entry
====================================================*/
.entry-attention {
color: #ff0000;
display: inline-block;
margin-top: 1.5em;
text-align: left;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
#entry .entry-head {
font-size: min(6vw, 3rem);
}
.entry-attention {
font-size: .8em;
}
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
#entry .entry-head {
font-size: min(4vw, 4rem);
}
}
@media (hover: hover) {}
/*====================================================
//id | form
====================================================*/
input, button, select {
margin: 0;
padding: 0;
background: none;
background-image: none;
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: initial;
border: none;
border-radius: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: inherit;
cursor: pointer;
}
input[type="text"],input[type="email"],input[type="tel"],input[type="search"],input[type="password"],input[type="url"],input[type="number"],input[type="date"], select, textarea {
-webkit-appearance: none;
background: #eaeaea;
border-radius: min(1vw, 10px);
color: var(--black);
display: block;
font-family: var(--font_family);
line-height: 1.4;
padding: .7em 1em;
width: 100%;
min-height: 3em;
flex: 1;
transition: .2s ease-in-out;
}
.input-s {
max-width: 15em;
}
textarea {
resize: vertical;
line-height: 1.6;
min-height: 80px;
width: 100%;
}
::-moz-placeholder {
color: #C9C9C9;
font-size: .8em;
}
:-ms-input-placeholder {
color: #C9C9C9;
font-size: .8em;
}
::placeholder {
color: #C9C9C9;
font-size: .8em;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, select:focus, textarea:focus {
}
input[type="file"],
label {
cursor: pointer;
}
form label {
line-height: 1.6;
display: inline-block;
position: relative;
}
.wpcf7-acceptance > .wpcf7-list-item {
display: inline-block;
position: relative;
width: 1.5em;
height: 1em;
}
input[type="checkbox"] + span ,
input[type="checkbox"] + label {
position: relative;
padding-left: 1.5em;
display: inline-block;
}
.wpcf7-acceptance > .wpcf7-list-item:before ,
input[type="checkbox"] + span:before ,
input[type="checkbox"] + label:before {
background: #fff;
content: '';
border: solid 1px;
border-radius: 2px;
border-color: var(--black);
position: absolute;
top: .2em;
left: 0px;
transition: .2s ease-in-out;
width: 1.1em;
height: 1.1em;
}
input[type="checkbox"] + label:before {
top: -.15em;
}
.wpcf7-acceptance > .wpcf7-list-item:after ,
input[type="checkbox"] + span:after ,
input[type="checkbox"] + label:after {
content: '';
border: solid;
border-width: 0 0 3px 3px;
border-color: transparent transparent var(--red) var(--red);
position: absolute;
top: .2em;
left: 3px;
opacity: 0;
transform: rotate(-45deg);
transition: .2s ease-in-out;
width: 1em;
height: .5em;
}
input[type="checkbox"] + label:after {
top: -2px;
}
.wpcf7-acceptance > .wpcf7-list-item:has(input[type="checkbox"]:checked):after ,
input[type="checkbox"]:checked + span:after ,
input[type="checkbox"]:checked + label:after {
opacity: 1;
}
input[type="radio"] + span ,
input[type="radio"] + label {
position: relative;
padding-left: 1.5em;
}
input[type="radio"] + span:before,
input[type="radio"] + label:before {
background: #fff;
content: '';
border: solid 1px;
border-radius: 2px;
border-color: var(--black);
position: absolute;
top: .2em;
left: 0px;
transition: .2s ease-in-out;
width: 1.1em;
height: 1.1em;
}
input[type="radio"] + span:after,
input[type="radio"] + label:after {
content: '';
border: solid;
border-width: 0 0 3px 3px;
border-color: transparent transparent var(--red) var(--red);
position: absolute;
top: .2em;
left: 3px;
opacity: 0;
transform: rotate(-45deg);
transition: .2s ease-in-out;
width: 1em;
height: .5em;
}
input[type="radio"]:checked + span:after,
input[type="radio"]:checked + label:after {
opacity: 1;
}
.select {
position: relative;
}
.select:before {
border: solid var(--black);
border-width: 0 1px 1px 0;
content: '';
display: block;
margin: auto;
pointer-events: none;
position: absolute;
top: 1.1em;
right: 10px;
transform: rotate(45deg);
width: .3em;
height: .3em;
z-index: 100;
}
#confirm .select:before {
display: none;
}
select {
cursor: pointer;
}
.tel input[type="text"] {
width: calc(100% / 3 - 10px);
max-width: 100px;
}
@media screen and (max-width: 769px) {
input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
input[type="password"], input[type="url"], input[type="number"], select, textarea,
.vkfs input[type="text"], .vkfs input[type="search"] {
padding: .7em .7em;
}
}
/*====================================================
////class コンタクトフォーム7
====================================================*/
.wpcf7-form .wpcf7-checkbox {
display: flex;
flex-wrap: wrap;
grid-gap: .3em 1.2em;
}
.wpcf7-form .wpcf7-radio {
display: grid;
grid-gap: .4em;
}
.wpcf7-form .wpcf7-list-item {
margin-left: 0;
}
.wpcf7-not-valid-tip {
bottom: -7px;
background: var(--red);
color: #fff;
display: inline-block;
font-size: 1.2rem;
font-weight: bold;
margin: 5px 0 10px;
padding: .25em .5em .3em .8em;
position: relative;
text-align: center;
/* width: 12em; */
white-space: nowrap;
}
.wpcf7-not-valid-tip:before {
border: solid transparent;
border-width: 0 5px 12px 5px;
border-bottom-color: var(--red);
content: '';
margin: auto;
position: absolute;
top: -10px;
left: 20px;
width: 0;
height: 0;
}
.wpcf7-spinner {
display: none;
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
background: var(--red);
border-color: var(--red);
border-radius: 5px;
color: #fff;
margin: 1.5em auto 0;
max-width: 720px;
padding: .5em 1em;
}
/*====================================================
////class .formBox
====================================================*/
.formBox {
/* background: #fff; */
margin: auto;
max-width: 1000px;
}
.formBox.confirm {
text-align: center;
}
.formBox.confirm .whiteBox {
display: inline-block;
text-align: left;
}
.formBox .innerBox {
padding-bottom: min(25vw, 150px);
}
.formBox .formItem-outer {
display: grid;
grid-gap: 1.8em;
}
.formBox .formItem {
display: grid;
grid-gap: .5em 1em;
width: 100%;
}
.formBox .formItem dt {
font-size: 1.125em;
font-weight: 400;
}
.formBox .required {
background: #f00;
color: #fff;
display: inline-block;
font-size: .733em;
font-weight: 700;
line-height: 1;
margin-left: 1em;
padding: .3em .5em .3em;
}
.formBox .formItem .mwform-tel-field {
display: flex;
margin-left: -3px;
align-items: center;
}
.formBox .formItem.form_file dd {
display: grid;
grid-gap: .4em;
}
.formBox .formItem.counter dd {
display: grid;
align-items: center;
grid-template-columns: 100px auto;
gap: .5em;
}
.formBox .formItem .mwform-tel-field input{
margin: 0 3px;
}
.formBox .formItem input[type="number"] {
width: 100px;
}
.formBox .backBtn {
position: relative;
}
.formBox .backBtn .linkBtn-small {
padding: 0;
}
.formBox .backBtn .linkBtn-small:after {
transform: rotate(-135deg);
right: auto;
left: 25px;
}
.formBox .backBtn .linkBtn-small:hover:after {
left: 15px !important;
}
.formBox .backBtn input[type="submit"] {
background: transparent;
color: inherit;
display: inline-block;
font-size: 1.4rem;
margin: 0 !important;
min-width: 140px;
/* padding: .2em 20px .1em 40px;*/
transition: .2s ease-in-out;
}
.formBox dd {
position: relative;
text-align: left;
}
.formBox .h_radioBox {
display: grid;
grid-gap: 0 2em;
grid-template-columns: auto 1fr;
}
.formBox .file {
display: grid;
grid-gap: .3em;
padding-top: .4em;
}
.formBox .consentBox {
display: flex;
justify-content: center;
margin: min(6vw, 40px) auto 0;
}
.formBox .consentBox .consent_check {
display: flex;
align-items: center;
position: relative;
}
/* .formBox .consentBox .consent_check .wpcf7-not-valid-tip {
position: absolute;
top: 100%;
left: 0;
} */
.formBox .consentBox .checkBox {
width: 1.5em;
}
.formBox .consentBox div {
position: relative;
}
.formBox .consentBox .mwform-checkbox-field {
display: block;
}
.formBox .btn-outer {
margin-top: min(6vw, 40px);
}
.formBox .linkBtn {
background: #fff;
border: solid 2px var(--black);
color: var(--black);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.125em;
margin: auto;
width: min(90%, 300px);
min-width: 0;
min-height: 60px;
}
.formBox .linkBtn:disabled {
opacity: .3;
pointer-events: none;
}
.formBox .linkBox .back .linkBtn {
background: transparent;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
.formBox .formItem-outer {
grid-gap: 2em;
}
.formBox .formItem dt {
text-align: left;
position: relative;
}
.formBox .formItem dd {
text-align: left;
width: 100%;
}
.mw_wp_form .formBox .error {
/* bottom: -2em;*/
left: 0;
padding-left: 1em;
}
.formBox .consentBox {
align-items: stretch;
/* flex-direction: column; */
}
.formBox .linkBox {
margin: auto;
max-width: calc(480px + 1em);
}
.formBox .linkBox.flexBox > div {
flex: 1;
}
.formBox .linkBox.flexBox input[type="submit"] ,
.formBox .linkBox.flexBox .linkBtn {
max-width: 240px;
min-width: 0;
width: 100%;
}
.formBox.confirm form {
display: grid;
place-items: center;
}
}
@media screen and (min-width:480px) and (max-width:769px) {
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
.formBox .formItem-outer {
grid-template-columns: auto 1fr;
grid-gap: 1.8em 0;
}
.formBox .formItem {
display: grid;
grid-column: span 2;
grid-template-columns: subgrid;
grid-gap: 0 2em;
line-height: 1.4;
width: 100%;
}
.formBox.input .formItem dt {
padding-top: .7em;
}
.formBox .formItem dd {
/* min-height: 50px; */
}
.wpcf7-form .formBox .formItem dd > span {
display: block;
width: 100%;
}
.wpcf7-form .formBox .wpcf7-checkbox {
padding-top: .5em;
}
#confirm .formBox .formItem dt {
padding-top: 0;
}
.mw_wp_form_confirm .formBox dd {
position: relative;
}
.formBox .formItem dd .wpcf7-radio {
padding: .7em 0;
}
.formBox .formItem.form_file dd {
padding: .3em 0;
}
.mw_wp_form_confirm .formBox .formItem dt,
.mw_wp_form_confirm .formBox .formItem dd {
padding: 20px 0;
}
.formBox dd .dateBox {
width: calc(50% - 5px);
}
.formBox .error {
}
}
/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {
}
@media (hover: hover) {
.formBox .linkBtn:hover {
background: var(--black);
color: #fff;
}
}
/*====================================================
////id | thanks_message
====================================================*/
#thanks_message {
padding-top: 60px;
}
.thanks_message-inner {
display: flex;
align-items: center;
justify-content: center;
min-height: 70vh;
min-height: 70svh;
padding: min(10vw, 80px) 0;
}
.thanks_message-text {
color: #fff;
font-size: min(4vw, 2.2rem);
text-shadow: 0 0 .1em #000, 0 0 .1em #000, 0 0 .1em #000, 0 0 .1em #000, 0 0 .1em #000;
text-align: center;
}
.thanks_message-link {
margin: min(8vw, 80px) auto 0;
max-width: 300px;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
#thanks_message {
background: url('../images/golf31/mv-bg-mob.webp') no-repeat center / cover;
}
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
#thanks_message {
background: url('../images/golf31/mv-bg-pc.webp') no-repeat center / cover;
}
}
/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {
}
@media (hover: hover) {}
/*====================================================
////id | footer
====================================================*/
.footer-inner {
padding: min(10vw, 80px) 0;
text-align: center;
}
.footer-logo {
margin: auto;
width: min(50vw, 300px);
}
.footer-text {
margin-top: 1em;
}
.copyright {
font-size: min(3vw, 1.4rem);
margin-top: min(6vw, 50px);
}
.page_top_btn {
display: none !important;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
.footer-text {
font-size: 1.8rem;
}
}
@media (hover: hover) {}