/* ゴルフラウンジ MY ROOM FC加盟募集ページ専用のスタイル */
:root{
    --main-bg-color: #006664;
    --second-bg-color: #fff;
	--third-bg-color: #d7e4bd;
    --forth-bg-color: #fff;
}
.red{
	color: red;
}
.txt-bold{
	font-weight: bolder;
}
body.page-template-fc {
	font-family: "BIZ UDPGothic", sans-serif;
    line-height: 1.3;
	color: var(--wp--preset--color--white);
}

/*
.page-template-fc :where(.wp-block-group.wp-block-group-is-layout-constrained) {
    margin-top: 0;
}
*/
.page-template-fc :is(h1, h2, h3, h4, h5) {
    width: fit-content;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}
.page-template-fc img:not(.wp-block-site-logo img){
	width: 100%;
    display: block;
}
.franchise_lp-wrapper {
	padding: 10%;
}
.franchise_lp-wrapper.first {
    background: var(--main-bg-color);
}
.franchise_lp-wrapper.second {
    font-size: clamp(10px, 5vw, 32px);
	color: #333;
    background: var(--second-bg-color);
}
.franchise_lp-wrapper.third {
    background: var(--third-bg-color);
	padding-left: 0;
	padding-right: 0;
	padding-bottom: 0;
}
.franchise_lp-wrapper.fourth {
    color: #333;
    background: #f3f3f3;
}

.franchise_lp-wrapper.fifth {
    color: #333;
    background: #eff1f3;
}

.franchise_lp-heading :is(small, .main-heading) {
    display: block;
}
.franchise_lp-heading small {
    font-size: clamp(20px, calc(60vw / 24), 32px); 
}
.franchise_lp-heading .main-heading {
    font-size: clamp(40px, 4vw, 58px);
}
.first-copy {
    width: fit-content;
    min-width: 340px;
    margin: .5em auto 1em;
    padding: .8em .5em;
    font-size: clamp(24px, 4vw, 40px);
    text-align: center;
    box-sizing: border-box;
    border: .5rem solid #fff;
    background: rgb(0 0 0 / 30%);
}
.first-copy, .copy_container {
    font-weight: bolder;
}
.copy_container {
	font-size: clamp(24px, 4vw, 40px);
	text-align: center;
}
.copy_container span{
    color: #00ff00;
}
.cta_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
}
.cta_container a {
    width: fit-content;
    display: block;
    font-size: clamp(10px, 5vw, 32px);
    font-weight: 900;
    color: #333;
    background: #ffd700; /* gold */
    text-decoration: none;
    padding: .8em 2.4em;
    margin: 1em 1em 0;
    border: .3em solid #fff;
    border-radius: 2em;
	transition: all 0.3s;
}
.cta_container a:hover,
.cta_container a:focus{
    color: #ffd700;
    background: #333;
}

/* second */
.concerns-container,
.solving-container {
    display: flex;
    flex-direction: column;
}
.conce-item,
.solv-item {
    background: #fff;
	border: 2px solid transparent;
	position: relative;
    margin: .5rem 1em 2em;	
}
.conce-item {
    padding:1em;
}
.conce-item::before,
.solv-item-heading::before {
    content: '';
    display: flex;
    width: 1.8em;
    height: 1.8em;
    color: #fff;
    background: var(--main-bg-color);
    position: absolute;
    justify-content: center;
    align-items: center;
	flex-shrink: 0;
}
.conce-item:last-child,
.solv-item:last-child {
    margin-bottom: 1em;
}

.concerns-container{
	counter-reset: concern;
    padding-top: 2em;
}
.conce-item {
    background: #eee;
	counter-increment: concern;
}
.conce-item::before {
    border-radius: .9em;
    content: counter(concern);
    top: -.9em;
    left: -.9em;
}
.conce-item span {
    color:  var(--main-bg-color);
    font-weight: bolder;
}
.solving-copy {
    width: fit-content;
    text-align: center;
    padding: 1em;
    margin: 1em auto 2em;
}
.solving-copy span {
    font-size: 110%;
    font-weight: bolder;
    margin: 5px;
}
.solving-container{
	counter-reset: solving;
}
.solv-item {
    margin-left: 0;
	counter-increment: solving;
}
.solv-item-heading {
    margin-top: -.5rem;
    margin-left: 0;
    margin-bottom: .5em;
    display: flex;
    align-items: center;
    column-gap: .5rem;
}
.solv-item-heading::before {
    content: "0"counter(solving);
    position: relative;
    left: 0;
    top: 0;
}
.solv-item-inner {
    font-size: clamp(10px, 80%, 32px);
    padding-left: .5em;
}
.solv-item-inner p {
    padding-bottom: .5em;
    margin-bottom: .5em;
    border-bottom: 2px dotted #333;
}

/* third */
.third .franchise_lp-heading {
    color: #333;
    margin-bottom: 10%;
}
.reasons-container {
	counter-reset: reason;
}
.reason-item {
	position: relative;
	counter-increment: reason;
}
.reason-item:not(:last-of-type)::before {
	width: 1em;
    content: counter(reason);
	position: absolute;
    top: 0;
    left: calc((100% - 1em) / 2);
    text-align: center;
    font-size: clamp(36px, 4vw, 46px);
    padding-top: .8em;
}
.reason-item .item-heading,
.reason-item:has( .microcopy){
    width: 100%;
    background: var(--main-bg-color);
    font-size: clamp(36px, 4vw, 46px);
    padding-top: 2em;
    padding-bottom: 1.3em;
}
.reason-item .item-heading > * {
    display: block;
}
.reason-item .item-heading .subcopy {
    font-size: 70%;
    font-weight: initial;
}
.reason-item-image {
    width: 60%;
    margin: -2em auto 4em;
}
.microcopy {
    text-align: center;
}
.microcopy + .cta_container > a {
    margin-top: .3em;
}
.reason-item:has( .microcopy){
	font-size: clamp(24px, 5vw, 32px);
    padding-top: 1.3em;
}

/* fourth*/
.step-container {
    display: flex;
    flex-direction: column;
    padding-top: 2em;
	counter-reset: steps;
}
.container-inner {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    column-gap: 1em;
}
.container-inner.container3 {
    padding-bottom: 2em;
}
.container-inner .container-inner-left.timeline-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-basis: calc( (100% - 1em) * 0.1);
    flex-grow: 0;
    flex-shrink: 0;
	position: relative;
    box-sizing: border-box;
    padding: 1em .6em;
}
.container-inner:not(.container1) .container-inner-left.timeline-nav {
    padding-top: 1.8em;
}
.container-inner-right {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    column-gap: 1em;
    position: relative;
    flex-basis: calc( (100% - 1em) * 0.87);
    flex-grow: 0;
    flex-shrink: 0;
    padding: 1em;
	box-sizing: border-box;
}
.container-inner:first-of-type .container-inner-right {
    background: #fff;
    box-shadow: 0px 2px 2px #ccc;
}
.container-inner:nth-of-type(2) .container-inner-right {
    border-bottom: 2px dotted #ccc;
}
.step-item{
	min-height: 5em;
	counter-increment: steps;
}
.step-item:nth-of-type(-n+2) {
    margin-bottom: 1em;
}
.step-item::before {
    content: 'STEP\A'counter(steps);
    font-size: 70%;
    font-weight: bolder;
    text-align: center;
	white-space:pre;
    width: 4.5em;
    aspect-ratio: 1/1;
    display: flex;
    position: absolute;
    border: 3px solid #333;
    border-radius: 4em;
    justify-content: center;
    align-items: center;
}
.container1 .step-item::before {
    color: #006664;
    border-color: #006664;
}
.container2 .step-item::before {
    color: #fff;
    border-color: #006664;
    background: #006664;
}
.container3 .step-item::before {
    color: #fff;
    border-color: #0a3d45;
    background: #0a3d45;
}
.container-inner-right :is(.item-summary, .item-detail) {
    margin-left: 4.5rem;
}
.container-inner-right .item-summary {
    text-align: left;
}
.container2 .container-inner-right .item-summary {
    color: #006664;
}
.container3 .container-inner-right .item-summary {
    color: #0a3d45;
}
.timeline-nav {
    border: .3em solid transparent;
}
.timeline-nav.white {
    background: #fff;
	border-color: #006664;
}
.timeline-nav.dark-cyan {
	color: #fff;
    background: #006664;
	border-color: #006664 #006664 transparent #006664;
}
.timeline-nav.very-dark-cyan {
	color: #fff;
    background: #0a3d45;
	border-color: #0a3d45; 
}
.timeline-nav.arrow::after {
    content: '';
    display: block;
    height: 1.5em;
    position: absolute;
    bottom: -1.45em;
    z-index: 1;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.timeline-nav.white.arrow::after {
    background-color: #fff;
    width: 100%;
    height: 1.3em;
    left: 0px;
    bottom: -1.25em;
}
.timeline-nav.dark-cyan.arrow::after {
    background-color: #006664;
    width: 120%;
    height: 1.5em;
    left: -10%;
    bottom: -1.7em;
}
.timeline-nav.very-dark-cyan.arrow::after {
    background-color: #0a3d45;
    width: 120%;
    height: 1.6em;
    left: -9%;
    bottom: -1.87em;
}
.timeline-nav .item {
    width: 100%;
    align-content: center;
    writing-mode: vertical-rl; 
    text-orientation: upright;
    letter-spacing: 0.1em;
    font-weight: bold;
}

/* fifth */
.fifth :is(input, textarea) {
    width: calc(100% - 2em);
    border-width: 0;
    font-size: 110%;
    display: block;
    margin: 0 auto;
}
.fifth input {
    min-height: 2em;
	cursor : pointer;
}
.fifth input[type="submit"]{
	color: #fff;
	background: #006664;
    border: 2px solid transparent;
	box-shadow: 2px 2px 6px #0a3d45;
	transition: all .3s;
}
.fifth input[type="submit"]:hover {
    color: #006664;
    background: #fff;
    border-color: #006664;
}
.necessary {
    width: 3.6em;
    height: 1.6em;
    display: inline-flex;
    color: #fff;
    font-weight: bold;
    letter-spacing: 4px;
    background: linear-gradient(45deg, #006664, #0a3d45);
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}
.necessary ~ .wpcf7-form-control-wrap {
    display: block;
    margin-top: .5em;
    margin-bottom: 1.5em;
    
}

@media ( max-width:480px ){
	.franchise_lp-wrapper {
		padding: 10% 1em 1em;
	}
}