@charset "UTF-8";
/* plan*/

header{
	background-image: url("../images/plan/h2_plan.jpg");
	background-repeat:  no-repeat;
	background-size: cover;
	background-position: center center;
	padding-bottom: 200px;
}
.main{
	padding: 0;
}
.title_list_plan{
	margin-bottom: 60px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	border-bottom: 1px solid #D8D8D8;
}

.plan_menu{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	
}
.plan_menu_items{
	width: calc((100% - 40px) / 3);
}
.plan_menu_items .plan_option{
	display: none;
}
.plan_menu_wrap{
}
.pic_plan::before {
	display: inline-block;
	font-size: 48px;
	font-family: 'Alex Brush', cursive;
	transform:translate(20px, 30px);
}
.pic_plan1::before{
	content: "Simple";
}
.pic_plan2::before{
	content: "Standard";
}
.pic_plan3::before{
	content: "Deluxe";
}
.plan_menu h3{
	font-size: 48px;
	z-index: 100;
}

.plan_data{
	padding: 10px 1rem 40px;
}
.plan dl{
	margin:  0 0 1rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.plan dt,.plan dd{
	font-size: 24px;
}
.plan dt{
	min-width: 180px;
	display: flex;
	align-items: center;
	/*justify-content: center;
	color: #fff;*/
}
.plan dt span{
	font-size: 24px;
	
}
.plan dd{
	
}
.plan_items{
}
.plan_items p{
	display: inline-block;
	margin-bottom: 10px;
	padding: 4px;
	color: #fff;
	border-radius: 4px;
}

.pattern{
	width: 100%;
}
.pattern span{
	padding: 4px;
	display: inline-block;
	background: #B6BAAD;
	border-radius: 4px;
}
.plan_items p:nth-child(1){
	
}
.plan_items p:nth-child(2){
	background: #B6BAAD;
}
.plan_items p:nth-child(3)
{
    background: #B6BAAD;
}
.plan_items p:nth-child(4) 
{
    background: #B6BAAD;
}
.digitalArt{
	margin-right: 4px;
}
.memo{
	margin-top: auto;
}
.plan_option li{
	padding: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid #D8D8D8;
	font-size: 18px;
}
.plan_option li:nth-child(odd){
	background: rgba(182,186,173,.1);
}
.plan_option li:nth-child(even){
	border-bottom: none;
}
.plan_option li:last-child{
	border-bottom: 1px solid #D8D8D8;
}
.plan_option li p:nth-child(1){
	width: 50px;
	margin-right: 20px;
}
.plan_option li p:nth-child(2){
	width: calc(100% - 70px);
}
.plan_option li p:nth-child(2) span{
	font-size: 14px;
}

/*********************************************************/
.list_plan_opstions_sp{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.list_plan_opstions_sp .plan_option{
	width: calc((100% - 40px) / 3);
}

.container_option{
	margin-bottom: 100px;
}
.wrap_options{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.options{
	width: 47%;
	margin-bottom: 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.options > p{
	width: 35%;
}
.wrap_price{
	width: 60%;
}
.wrap_price h4{
	margin-top: 0;
	line-height: 1;
}
.price{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	line-height: 1.4;
}
.price dt{
	width: calc(100% - 10rem);
	margin-right: 2rem;
}
.price dd{
	width: 7rem;
}

.covid{
	width: 100%;
	margin-bottom: 60px;
	padding: 60px 100px;
	background-image: url("../images/plan/bg_plan01.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
.covid h3{
	text-align: center;
	font-size: 26px
}
.covid p{
	text-align: center;
}
.service{
	display: flex;
	justify-content: space-between;
	margin-bottom: 60px;
}
.pic_service{
	width: 50%;
}
.inner_pic_service{
	width: 100%;
	height: 0;
	padding-bottom: 66.66%;
	background: url("../images/plan/img_plan005.jpg") no-repeat;
	background-position: right bottom;
	background-size: 66.66% auto;
}
.pic_service img{
	width: 66.66%;
	height: auto;
}
.content_service{
	width: calc(100% - 50% - 20px);
	margin-left: 20px;
}
.content_service li{
	margin-bottom: 2.4rem;
	margin-left: 2rem;
	list-style-position: outside;
	list-style-type: disc;
	color: #A4EBF3;
}
.content_service li span{
	color: #404040;
}
.area{
	margin-bottom: 100px;
}
.area dl{
	margin: 20px 0 80px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	text-align: center;
}
.area dt{
	width:20rem ;
	padding: 1rem;
	color: #fff;
	background: #FFD374;
	font-size: 20px;
	align-self: stretch;
}
.area dd{
	width: calc(100% - 20rem);
	padding: 1rem;
	border: 1px solid #FFD374;
	font-size: 20px;
}
.area dd span{
	font-size: 14px;
	margin-left: 20px;
}
.br_none{
	display: none;
}
.wrap_flow{
	margin-bottom: 120px;
}
.wrap_flow h3 {
	padding-bottom: 50px;
	text-align: center;
	font-size: 26px;
}
.wrap_flow h3::after {
	display:block;
	content: "";
	width: 90px;
	height: 4px;
	margin: 26px auto 0;
	border-bottom : 4px dotted #a4ebf3; 
	border-radius : 3px; 
}
.wrap_flow h4 {
	margin-top: 0;
	margin-bottom: 0.5rem;
	font-family: 'Zen Old Mincho', serif;
	color: #404040;
	font-size: 24px;
}
.wrap_flow h5{
	margin: 14px 0 8px;
}

.flow ,.flow_last{
	width: 90%;
    max-width:1160px;
	margin: 50px auto;
	padding-bottom: 36px;
	background: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	background-image: url("../images/plan/bprder_flow.svg");
	background-repeat: no-repeat;
	background-size: auto 20px;
	background-position: center bottom;
}
.flow_last{
	background-image: none;
}
.step .bodoni{
	font-size: 24px;
}
.step, .step_r, .step_txt {
    padding: 5px;
}
.step_t_t{
	display: flex;
	align-items: center;
}
.step_t_t:first-child{
	margin-bottom: 08rem;
}
.step_t_t h5{
	margin: 0;
}
.flame2{
	width: 260px;
	margin: 0;
}
.flame2 .wrap{
/*	margin-bottom: 10px;*/
	padding: 0;
}

.flame2 .access_mail{
	margin-top: 10px;
}
.step {
	width: 120px;
	margin: 0 40px 0 0;
	color: #404040;
}

.step_txt1 {
    width: calc(100% - 160px - 280px);
}
.step_txt{
	width: calc(100% - 160px);
}
.step_txt ul{
	margin: 1.4rem 0;
}
.step p {
	width: 100px;
	height: 100px;
	margin: 0 auto;
	background: #B6BAAD;
	color: #fff;
	border-radius: 50%;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.step p span {
	display: block;
    font-size: 2em;
    line-height: 1.2em;
}
.flow:after, .flow:before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.mark,.mark2{
	margin-bottom: 0;
	padding: 4px 1rem;
	color: #fff;
	background: #B6BAAD;
	cursor: pointer;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items:center;
	position: relative;
}

.mark .bar,.mark2 .bar{
	display: block;
	width: 30px;
	height: 6px;
	border-radius: 4px;
	background: #fff;
	position: absolute;
	top:50%;
	right: 1rem;
	transform: translateY(-50%) rotate(0);
}
.check{
	display: none;
}
.contents-wrap h3{
	margin: 0;
}
.mark span:nth-of-type(2),
.mark2 span:nth-of-type(2){
	transform: translateY(-50%) rotate(90deg);
	transition: .4s;
}
.check:checked +.mark span:nth-of-type(2),
.check:checked +.mark2 span:nth-of-type(2){
	transform: translateY(-50%) rotate(0);
}
.content_important,.reply{
/*	display: none;*/
	margin-top: 10px;
	padding: 10px;
	background: rgba(182,186,173,.1);
	height: auto;
	opacity: 1;
	visibility: visible;
	transition: .8s;
}

.check:checked ~ .content_important,
.check:checked ~ .reply{
	height: 0;
	opacity: 0;
	visibility: hidden;
}
.reply dt,.reply2 dt{
	border-bottom: 1px solid #B6BAAD;
}
.reply dd,.reply2 dd{
	margin-bottom: 1.4rem;
}
.content_important{
/*	display: none;*/
}
.content_important p{
	margin-bottom: 30px;
}
.access_tel .tel-link {
/*	margin-top: 14px;*/
}
@media (max-width:880px){
	
.page_nav {
    width: 60%;
    margin: 0 auto 80px;
    display: block;
}
.page_nav li{
	width: 100%;
	border-bottom: 1px dashed#707070;
	border-right: none;
	}
.page_nav li:last-child{
	width: 100%;
	border-bottom:none;
	}
.page_nav li a:hover{
	transform: scale(1.1);
	}
.button {
	padding: 1rem;
	background: #fff;
	position: static;
	transition: none;
	color: #404040;
	letter-spacing: 0;
	transition: .6s;
}
	.button::before,.button::after{
		display: none;
	}
	.button:hover {
	color:#333;
	letter-spacing: 3px;
}
.br_none{
	display: block;;
}
}/*880*/


@media (max-width:800px){
	.list_plan_opstions_sp{
	display: none;
}
.plan_menu_items .plan_option{
	display: block;
}
	.plan_menu {
    display:block;
}
.plan_menu .plan_menu_items {
	width: 100%;
	margin: 0 auto 60px;
	}
	.wrap_options{
	display: block;
}
.options{
	width: 100%;
	margin-bottom: 30px;
	}
.service{
	display: block;
}
.pic_service{
	width: 60%;
	margin: 0 auto;
}
.inner_pic_service{
	width: 100%;
	height: 0;
	padding-bottom: 66.66%;
	background: url("../images/plan/img_plan005.jpg") no-repeat;
	background-position: right bottom;
	background-size: 66.66% auto;
}
.pic_service img{
	width: 66.66%;
	height: auto;
}
.content_service{
	width: calc(100% - 20px);
	margin-left: 0;
	margin-right: 20px;
}
.covid{
	padding: 60px 50px;
	}
.contents-wrap{
	line-height: 1.6;
}
	.tel-link{
		font-size: 24px;
	}
.flame2 .access_tel span{
	display: block;
/*	font-size: 1.6rem;*/
/*	margin: 0 0 14px 0 ;*/
}

.flow ,.flow_last{
	display: block;
	}
.step{
	margin: 0 auto 20px;
	}
	.step + div{
		width: 100%;
	}
	 .flame2{
		margin: 24px auto 0;
	}
	.step_r{
		display: none;
	}
	.flow_last{
		margin-bottom: 0;
		padding-bottom: 0;
	}
	.wrap_flow{
	margin-right: 20px;
		margin-bottom: 80px;
	}
	.area dl{
		display: block;
	}
	.area dt,.area dd{
		width: 100%
	}
	.area .br_none{
		display: block;
	}
}/*800*/

@media (max-width:500px){
	.icon_access{
		display: none;
	}
	.flame2 .access_tel span{
		font-size: 16px;
	}
	
	.flame2 .access_tel span:first-child{
		display: block;
		font-size: 28px;
		margin: 14px 0 0;
	}
.flame2 .access_tel .tel-link a{
	display: block;
	font-size: 28px;
	height: 30px;
	}
	.area{
		padding-right: 40px;
	}
}
@media (max-width:480px){
	
	.plan_menu .plan_menu_items {
	width: 100%;
	}
	.access_tel .tel-link {
	display: block;
	height: 30px;
	
}
 .access_tel .time{
		margin-top: 12px;
	}
}/*480*/