﻿@charset "utf-8";


/* style */
/* -------------------------------------------------------- */
.plan-cont {padding:60px 0 120px 0;}
.plan-cont .nav {margin:0 0 0 -1px; display:flex;}
.plan-cont .nav > div {padding:0 0 0 1px; box-sizing:border-box; flex:1;}
.plan-cont .nav a {font-family:'Noto Sans JP', sans-serif; font-size:2.5rem; font-weight:200; line-height:1; letter-spacing:0.2em; text-align:center; text-decoration:none; color:#fff; padding:0.5em 0; background-color:#c9caca; display:block; transition:background-color 0.3s ease;}
.plan-cont .nav a.on,
.plan-cont .nav a:hover {background-color:#595757;}
.plan-cont .nav a span {font-weight:400;}
.plan-cont .nav a.off {opacity:1;}
.plan-cont .map {max-width:500px; text-align:center; margin:70px auto 0 auto;}
.plan-cont .ctx {max-width:550px; text-align:left; margin:80px auto 0 auto;}
.plan-cont .txt1 {display:flex; flex-wrap:wrap; justify-content:space-between;}
.plan-cont .txt1 dt {font-family:'Noto Sans JP', sans-serif; font-size:3.7rem; font-weight:200; line-height:1; letter-spacing:0.1em; margin:10px 0 0 0;}
.plan-cont .txt1 dt span {font-weight:400;}
.plan-cont .txt1 dd {margin:10px 0 0 0;}
.plan-cont .txt1 dd .tag {width:246px; font-family:'Noto Sans JP', sans-serif; font-size:2.7rem; font-weight:200; line-height:1; letter-spacing:0.1em; text-align:center; color:#fff; padding:0.2em 0 0.2em 0.1em; background-color:#9d8c54; box-sizing:border-box; display:block;}
.plan-cont .txt1 dd .sub {font-size:1.1rem; margin:0.2em 0 0 0; display:block;}
.plan-cont .txt2 {display:flex; flex-wrap:wrap; justify-content:space-between;}
.plan-cont .txt2 dl {margin:30px 0 0 0;}
.plan-cont .txt2 dt {font-size:1.8rem; letter-spacing:0.1em; padding:0 0 0 20px; position:relative;}
.plan-cont .txt2 dt svg {width:18px; height:18px; fill:#9d8c54; display:block; position:absolute; top:0.3em; left:0;}
.plan-cont .txt2 dd {font-size:2.2rem; line-height:1; letter-spacing:0.05em; margin:0.2em 0 0 0; padding:0 0 0 20px;}
.plan-cont .txt2 dd .sub1 {font-size:204%;}
.plan-cont .txt2 dd .sub2 {font-size:82%;}
.plan-cont .txt3 {padding:30px 0 0 0;}
.plan-cont .txt3 > div {font-size:1.8rem; margin:20px 0 0 0; padding:0 0 0 16px; position:relative;}
.plan-cont .txt3 > div::before {content:''; width:8px; height:1em; background-color:#9d8c54; display:block; position:absolute; top:0.32em; left:0;}
.plan-cont #planType {position:relative;}
.plan-cont #planType > div {width:100%; position:absolute; top:0; left:0; pointer-events:none; opacity:0; transform:translate3d(0,30px,0);}
.plan-cont #planType > div.on {pointer-events:auto; opacity:1; transform:translate3d(0,0,0); transition:opacity 0.8s 0.3s ease, transform 0.8s 0.3s ease;}
.plan-cont #planType.aType #aType,
.plan-cont #planType.aMenu #aMenu,
.plan-cont #planType.bType #bType,
.plan-cont #planType.cType #cType,
.plan-cont #planType.cMenu #cMenu,
.plan-cont #planType.dType #dType {position:relative;}

@media screen and (max-width:1000px){
	.plan-cont {padding:30px 0 50px 0;}
	.plan-cont .nav {margin:0 0 0 -1px; display:flex; flex-wrap:wrap;}
	.plan-cont .nav > div {width:50%; padding:0 0 1px 1px; flex:0 0 auto;}
	.plan-cont .nav a {font-size:1.8rem;}
	.plan-cont .map {margin:30px auto 0 auto;}
	.plan-cont .ctx {max-width:100%; text-align:center; margin:30px auto 0 auto;}
	.plan-cont .txt1 {text-align:center; display:block;}
	.plan-cont .txt1 dt {font-size:2.8rem;}
	.plan-cont .txt1 dd {margin:15px 0 0 0;}
	.plan-cont .txt1 dd .tag {width:auto; font-size:2.4rem; padding:0.1em 1.5em 0.2em 1.6em; display:inline-block;}
	.plan-cont .txt2 {text-align:left; margin:0 auto; display:inline-block;}
	.plan-cont .txt2 dl {margin:20px 0 0 0;}
	.plan-cont .txt2 dt {font-size:1.6rem; padding:0 0 0 20px; position:relative;}
	.plan-cont .txt2 dt svg {width:12px; height:12px; top:0.4em; left:0;}
	.plan-cont .txt2 dd {font-size:1.8rem;}
	.plan-cont .txt3 {text-align:left; padding:20px 0 0 0;}
	.plan-cont .txt3 > div {font-size:1.4rem; margin:10px 0 0 0; padding:0 0 0 12px;}
	.plan-cont .txt3 > div::before {content:''; width:6px;}
}

