@charset "UTF-8";
@import "reset.css";
/* CSS Document */

:root {
    --main-color: #59993D;
    --cta-color: #FDAF17;
	
	--font-main: "Noto Sans JP", sans-serif;
	--font-en:"Bebas Neue", sans-serif;
		
	--bg-color:#F4F8F2
}

/*************************************

   common

**************************************/

html{scroll-behavior: smooth;}
body{
	font-family: var(--font-main);
	font-weight: 400;
	font-style: normal;
	margin: 0;
	padding: 0;
	position: relative;
}

article{
	overflow-x: hidden
}
p,span,li,dt,dd{
	line-height: 1.8em;
	font-size: 15px;
}
@media screen and (min-width:1000px){
	p,span,li,dt,dd{font-size: 16px}
}
a{
	text-decoration: none;
	word-break: break-all;
	transition: all 0.3s ease-out;
}
picture,
img{max-width: 100%}
.obc{
	width: 100%;
	height: 100%;
	object-fit: cover;
	vertical-align: bottom
}
.wrap{
	width: 90%;
	max-width: 1240px;
	margin: 0 auto
}
@media screen and (min-width:1600px){
	.wrap{max-width: 1400px;}
}
.flex{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between
}
@media screen and (max-width:667px){
	.sp-none{display: none!important}
	.pcbr{display: none!important}
}
@media screen and (min-width:668px){
	.sp-size{display: none!important}
	.spbr{display: none!important}
}

/* 固定ヘッダーの高さ分だけ余白を作る */
.anchor-target {
  scroll-margin-top: 142px; /* ヘッダーの高さ分調整 */
}

/*****  font  ******/

.font-en{
  font-family:var(--font-en);
  font-weight: 400;
  font-style: normal;
}

/*************************************
   btn
**************************************/
.btn_wrap{
	margin: 2em auto;
}
.btn1 {
	display: inline-block;
	width: 100%;
	max-width: 400px;
	text-align: center;
	text-decoration: none;
	padding: 1.3em;
	outline: none;
	color: #fff;
	background-color: var(--main-color);
	position: relative;
	transition: color 0.5s ease;
	letter-spacing: .5px;
	border-radius: 2.5em;
	overflow: hidden;
}
.btn1:hover::before {
  transform-origin: left;
}
.btn1::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: right;
  transition: all 0.5s ease;
  transition-property: transform;
	border-radius: 2.5em;
}
.btn1 span{
	position: relative;
	color: #fff;
	margin-right: 1em;
}
.btn_next:after,
.btn_down:after,
.btn_back:before{
	content: '';
	display: inline-block;
    width: 30px;
    height: 30px;
    border: solid 1px #fff;
    color: #fff;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    font-family: icomoon;
    font-size: 13px;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
	transition: .5s
}
.btn_next:after,
.btn_down:after{right: 5%;}
.btn_next:after{content: '\ea3c'}
.btn_down:after{content: '\ea3e'}

.btn_back:before{
	left: 5%;
	content: '\ea40'
}
.btn_next:hover:after,
.btn_down:hover:after,
.btn_back:hover:before{transition: .5s} 

.btn_next:hover:after{right: 3%}
.btn_down:hover:after{top: 53%}
.btn_back:hover:before{left: 3%}


.icon_btn{
	width: 100%;
	max-width: 500px;
	margin-bottom: 1em;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: solid 2px #000;
	border-radius: 5px;
	padding: .8em;
	color: #000;
	font-size: 1.1em;
}
.icon_btn i{
	margin-right: .5em;
}
.icon_btn span{
	font-weight: 500;
	font-size: 1rem
}

.btn_cta{
	background: var(--cta-color);
    color: #fff;
    font-weight: bold;
    text-align: center;
    border-radius: 3em;
    padding: 1em;
    width: 90%;
    max-width: 600px;
    display: block;
    font-size: clamp(1rem, 0.905rem + 0.48vw, 1.5rem);
	margin: 0 auto
}

@media (min-width:1200px){
	.btn_cta{
		padding: 1.5em;
	}
}


/*************************************
    color
**************************************/

.c_main{
	color: var(--main-color)
}
.bg_main{
	background: var(--main-color);
}
.bg_color{
	background: var(--bg-color)
}



/*************************************
   title
**************************************/

.titile1{
	margin: 2em auto;
}
.title1 span,
.title2 p:not(.bg_main){
	display: block;
	font-size: clamp(1rem, 0.818rem + 0.91vw, 1.5rem);
	font-weight: bold;
}
.title1 h2,
.title2 h2{
	font-weight: bold;
	font-size: clamp(1.3rem, 0.682rem + 3.09vw, 3rem);
	line-height: 1.6
}
@media (min-width:1400px){
	.title1 h2,
	.title2 h2{
		line-height: 2
	}
}

.title2{
	text-align: center;
	margin: 3em auto;
	position: relative
}
.title_en{
	font-size: clamp(8rem, 5.455rem + 12.73vw, 15rem);
	line-height: 1;
	color: var(--bg-color);
	display: block;
	z-index: -1;
	position: absolute;
	top: -25%;
	left: 50%;
	transform: translateX(-50%)
}
.title2 h2 span{
	font-size: 1em;
	font-weight: bold;
}
.title2 p.bg_main{
	color: #fff;
	width: 100%;
	max-width: 1000px;
	border-radius: 10px;
	margin: 2em auto;
	padding: 1em;
}

.title2 span.c_main{
	font-weight: bold;
	font-size: 1em;
}


/*************************************
   header
**************************************/
header{
	position: fixed;
	width: 100%;
	z-index: 1000;
	top: 0;
	display: flex;
	align-items: center;
	margin: 0 auto;
}
.header_h1{
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	display: block;
}

.acc_click{
	position: relative;/*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
	transition: all .5s ease;
}
/*アコーディオンで現れるエリア*/
.box{
    display: none;/*はじめは非表示*/
   
}
.box a{
	text-decoration: none;
	padding: .5em 0;
	display: block;
	font-size: 14px;
	color: #000
}

.header_sns{
	border-bottom: none!important;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	gap:10px;
}

.nav_insta,
.nav_tiktok{
	background: #e43f97;
	width: 50px;
	height: 50px;
	border: solid 2px #e43f97;
    border-radius: 50%;
    color: #fff!important;
	display: block;
	text-align: center;
	transition: .2s;
	line-height: 46px!important;
	font-size: 25px!important;
	padding: 0!important;
}
.nav_insta:hover,
.nav_tiktok:hover{
	background: #fff!important;
	transition: .2s
}

.nav_insta:hover i{
	color: #e43f97
}
.nav_tiktok:hover i{
	color: #000
}

.nav_tiktok{
	background: #000;
	border: solid 2px #000
}




@media screen and (max-width:999px){
	header{
		height: 65px;
		border-bottom: solid 1px #eee;
		background: #fff;
	}
	.header_h1{
		left: 3%;
		max-width: 160px
	}
	.global-nav{
  		position: fixed;
  		right: -500px;
  		top: 0;
  		width: 90%; 
		max-width: 500px;
  		height: 100vh;
  		background-color: #fff;
  		transition: all .6s;
  		z-index: 2000;
  		overflow-y: auto;
	}
	.global-nav__list {
  		padding: 5em .5em 2em;
  		list-style: none;
		overflow-y: auto;
	}
	.global-nav__item{
		width: 100%;
		padding:1em;
		border-bottom: 1px #ccc solid;
		font-size: 1em
	}
	.global-nav__item > a {
  		text-decoration: none;
  		color: #000;
		letter-spacing: 1px;
		line-height: 1.3em;
	}
	.global-nav__item a:hover {opacity: .8}
	
	.acc_click{
		display: block;
		width: 100%;
	}
	/*アイコンの＋と×*/
	.acc_click::before,
	.acc_click::after{
		position: absolute;
		content:'';
		width: 15px;
		height: 1px;
		background-color: #6EC300;
	}
	.acc_click::before{
		top:48%;
		right: 15px;
		transform: rotate(0deg);
	}
	.acc_click::after{    
		top:48%;
		right: 15px;
		transform: rotate(90deg);
	}
	/*　closeというクラスがついたら形状変化　*/
	.acc_click.close::before{
		transform: rotate(45deg);
	}
	.acc_click.close::after{
		transform: rotate(-45deg);
	}
	.box{padding: .5em}
	.box li{margin: .3em 0}
	.box li a:before{
		content: '-';
		color: #a1cc4d;
		display: inline-block;
		margin-right: .5em
	}
	.nav_btn_wrap{display: none}
	.nav_btn{
		margin: 2em auto;
		text-align: center
	}
	.nav_btn a{
		background: var(--cta-color);
		padding: .8em 1em;
		width: 250px;
		margin: 0 auto;
		border-radius: 5px;
		color: #fff;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		column-gap: 10px;
		justify-content: center;
	}
	.nav_btn a span{
		font-weight: bold;
	}
	.hamburger{
  		cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        position: absolute;
        top: 50%;
        right: 4%;
        width: 25px;
        height: 25px;
        transform: translate(0, -50%);
	}
	.hamburger__line {
  		position: absolute;
  		left: 50%;
		transform: translate(-50%,0);
  		width: 25px;
  		height: 1px;
    	background-color: #000;
  		transition: all .6s;
	}
	.hamburger__line--1 {top: 3px;}
	.hamburger__line--2 {top: 12px;}
	.hamburger__line--3 {top: 21px;}
	.black-bg {
  		position: fixed;
  		left: 0;
  		top: 0;
  		width: 100vw;
  		height: 100vh;
  		z-index: 100;
  		background-color: #252525;
  		opacity: 0;
  		visibility: hidden;
  		transition: all .6s;
  		cursor: pointer;
	}
	/* nav-open */
	.nav-open .global-nav {right: 0;}
	.nav-open .black-bg {
 		opacity: .7;
  		visibility: visible;
	}
	.nav-open .hamburger{
		background: none;
		box-shadow: none;
		z-index: 9999;
		right: 2em
	}
	.nav-open .hamburger__line--1 {
  		transform: rotate(-45deg);
  		top: 20px;
		background-color: #000000
	}
	.nav-open .hamburger__line--2 {
  		width: 0;
  		left: 50%;
	}
	.nav-open .hamburger__line--3 {
  		transform: rotate(45deg);
  		top: 20px;
		background-color: #000000
	}
	
}

/*******  pc_nav  ********/

@media screen and (min-width:1000px){
	header{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		height: 80px;
		background-color: transparent;
		transition: background-color 0.3s ease, box-shadow 0.3s ease; 
	}
	header.is-scrolled {
	  background-color: #ffffff; 
	  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); 
	}
	
	.header_h1{
		left: 3%;
		max-width: 150px
	}	
	.global-nav{
		display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        width: calc(100% - 150px);
        margin-left: calc(150px + 3%);
		padding-right: 1%;
	}
	.global-nav__list{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap:10px;
		
	}
	
	.global-nav__item > a{
		color: #000;
		font-size: 14px;
		letter-spacing: .8px;
		font-weight: 600;
		display: inline-block;
		text-align: center;
		text-decoration: none;
		outline: none;
		/*border-bottom: 2px;*/
		position: relative;
		padding: 0 .5em
	}
	.global-nav__item > a:hover{color:var(--main-color)}
	.global-nav__item > a:after{
		position: absolute;
		left: 50%;
		bottom: -10px;
		transform: translate(-50% , 0);
		content: '';
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background: var(--main-color);
		visibility: hidden;
		opacity: 0;
		transition: 0.5s;
		 
	}
	.global-nav__item > a:hover::after {
		visibility: visible;
		opacity: 1;
		transition: 0.5s;
	}
	.dropdown{position: relative}
	.box{
		position: absolute;
        margin-top: 1.5em;
		padding: 0;
        text-align: center;
        background: rgb(255 255 255 / 50%);
        width: 150px;
        left: calc(-50% + 2em);
	}
	.box li{border-bottom: solid 1px #fff;}
	.box li:hover{
		background: rgb(216 237 172 / 50%);
		transition: transform 0.5s;
	}
	.nav_btn_wrap{width: 100px;}
	.nav_btn{
		text-align: center;
	}
	.nav_btn a{
		display: flex;
		justify-content: center;
		align-items: center;
		column-gap:  10px;
		flex-wrap: wrap;
		color: #fff;
		transition: .2s;
		padding: .8em 1em;
		width: 180px;
		background: var(--cta-color);
		border-radius: 5px;
	}
	.nav_btn a i{
		font-size: 15px;
	}
	.nav_btn a span{
		font-size: 1em;
		display: block;
		font-weight: bold
	}
	.nav_btn a:hover{
		opacity: .8;
		transition: .2s
	}
	.hamburger,
	.black-bg,
	.spnav{display: none}
	
	.nav_insta:after,
	.nav_tiktok:after{
		display: none!important
	}
}


@media screen and (min-width:1400px){
	.header_h1{left: 5%;}	
	.global-nav{
		display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        width: calc(100% - 200px);
        margin-left: calc(200px + 5%);
		padding-right: 5%;
	}
	.nav_btn_wrap{width: 150px;}
	.nav_btn a{
		width: 220px
	}
}
@media screen and (min-width:1600px){
	.global-nav__item{margin-right: 2em}
	.global-nav__item a{font-size: 15px;}
}

/***********************************
  footer (fix)
***********************************/
/* page-top */

#page-top{
	position: fixed;
	bottom: 10%;
	right: 3%;
	text-decoration: none;
	z-index: 800;
}
#page-top a{
	width: 50px;
	height: 50px;
	background: var(--main-color);
	border-radius: 50%;
	line-height: 50px;
	display: block;
	text-align: center;
	color: #fff
}
@media screen and (max-width:667px){
	#ft_fix{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 800;
		background: var(--main-color);
		padding-bottom: env(safe-area-inset-bottom);
	}
	#ft_fix > *{
		width: 50%;
		text-align: center;
	}
	#ft_fix a{
		color: #fff;
		display: block;
		padding: .8em
	}
	.fix_tel{border-right: solid 1px #fff}
	.fix_contact{
		background: var(--cta-color)
	}
	#ft_fix i{margin-right: .3em}
}
@media screen and (min-width:668px){
	#ft_fix{display: none}
}

/***********************************
  footer
***********************************/
footer{
	position: relative;
	overflow: hidden
}

.footer_info,
.footer_nav{
	width: 100%;
	margin-bottom: 1em;
	position: relative;
	z-index: 1
}

.footer_info h1{
	width: 250px;
	margin-bottom: 1.5em;
}
.footer_info p a{color: #000000}


.footer_nav ul{width: 100%;}
.footer_nav li a{
	color: #000;
	font-weight: 500;
}

#copy{
	width: 100%;
	text-align: center
}
#copy p{font-size: 11px;}


@media (max-width:767px){
	footer{padding: 3em 0 5.5em}
	.footer_info{text-align: center}
	.footer_info h1{margin: 0 auto 1.5em}
	.footer_nav_pc{display: none}
	.footer_nav{margin-top: 3em}
	.footer_nav ul{
		display: flex;
		flex-wrap: wrap;
		border-top: solid 1px #ccc
	}
	.footer_nav li{
		width: 50%;
		border-bottom: solid 1px #ccc;
		border-right:solid 1px #ccc;
		padding: 1em;
		text-align: center;
	}
	.footer_nav_sp ul li:nth-child(even){border-right: none}
}
@media (min-width:768px){
	footer{padding: 3em 0}
	.footer_nav_sp{display: none}
	.footer_nav{margin-top: 3em;}
	.footer_nav ul{width: 33%}
	.footer_nav li{margin-bottom: 1em;}
}

@media (min-width:1000px){
	footer{padding: 7em 0 0}
	.footer_info{width: 30%}
	.footer_nav{width: 50%;margin-top: 0}
	#copy{margin-top: 3em}
}





/***********************************
  お知らせ　一覧
***********************************/
.news_list{
	padding: 1em;
	border-bottom: solid 1px #ccc;
}
.news_list dl{
	justify-content: flex-start;
	align-items: center;
}
.news_list dt{
	font-size: 15px;
    display: block;
    line-height: 1;
	width: 100%;
	color: #6EC300;
}
.news_list dd{width: 100%;}
.news_list dd a{
	color: #000;
	display: block;
	font-weight: 500
}
.news_list dd a:hover{
	color: #6EC300;
}
@media (max-width:667px){
	.news_list dt{margin-bottom: .5em}
}

@media (min-width:668px){
	.news_list dt{width: 20%}
	.news_list dd{width: 80%}
}

/***********************************
  ブログ　一覧
***********************************/

.blog_wrap{
	gap:30px;
	margin: 150px auto 5em;
}
.blog_list{
	width: 100%;
	margin-bottom: 1em;
}
@media (min-width:768px){
	.blog_list{width: 49%}
}
@media (min-width:1200px){
	.blog_list{
		width: calc((100% / 3) - 30px);
	}
	.blog_wrap:after{
		content: '';
		display: block;
		width: calc((100% / 3) - 30px);
	}
}


.blog_list figure{
	width: 100%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	margin-bottom: 1em;
}
.blog_list figure a{
	display: block;
	width: 100%;
	height: 100%;
}
.blog_list figure img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	vertical-align: bottom;
}

.blog_cat{
	background: #6EC300;
	color: #fff;
	padding: .5em 1em;
	margin-bottom: .5em
}
.date{
	line-height: 1;
	font-size: 15px;
	font-weight: bold;
}
.blog_list h4{
	font-size: 1.3em;
	font-weight: 500;
	color: #000;
	margin-top: .3em;
	display: block;
}

.blog_list p{
	color: #000;
	margin-top: 1em;
}


.blog_cat_name{
	font-weight: bold;
	color: var(--color-green);
	margin: 1em auto 3em;
	text-align: center;
	font-size: 1.2em;
}

/***********************************
 コンテンツ　サイドメニュー
***********************************/

.content,
.side_menu{
	width: 100%;
	margin-bottom: 1em;
}
@media(min-width:1000px){
	.content{width: 70%}
	.side_menu{width: 26%}
}

.side_title{
	background: var(--main-color);
    padding: .6em;
    color: #fff;
    font-weight: 600;
    font-size: 1.2em;
	margin-bottom: 1em
}
.side_archive .date{
	color: var(--main-color);
	font-size: 13px;
}
.side_archive h3{
	font-size: .9em;
	font-weight: 500;
}
.side_cat_list{
	display: flex;
	align-items: center;
	padding: .8em 0;
	border-bottom: solid 1px #ccc;
}
.sidelink_child{padding-left: 1em}
.sidelink_child:before{
	content: '-';
}
.side_cat_list a,
.side_archive_list a{color: #000}


/***********************************
  お知らせ　詳細（single)
***********************************/
.content_title{
	margin-bottom: 2em;
	padding-bottom: 1.5em;
	position: relative;
	border-bottom: solid 2px #ccc
}
.content_title .date{color: var(--main-color)}
	
.content_title h2{
	font-size: 1.6em;
	line-height: 1.6;
	font-weight: 600;
	margin-top: .3em;
	margin-bottom: .5em
}
@media (min-width:668px){
	.content_title h2{font-size: 1.8em}
}

/* user content */
.content_wrap{margin-bottom: 3em}
.content_wrap h1,
.content_wrap h2,
.content_wrap h3,
.content_wrap h4{
	margin:1em auto;
	font-weight: bold;
	line-height: 1.6em;
}

.content_wrap h1,
.content_wrap h1 span{
	font-size: 1.6em;
    background: var(--bg-color);
    padding: 0.5em;
}
.content_wrap h2{
	font-size: 1.4em;
    border-left: solid 8px var(--main-color);
    padding: .8em 0.5em;
}
.content_wrap h2 span,
.content_wrap h3 span{
	font-size: 1em;
	font-weight: bold;
}
.content_wrap h3{
	font-size: 1.3em;
	padding: 0;
	color: var(--main-color);
	    border-bottom: solid 2px #d2e0cc;
    padding: .5em;
}
.content_wrap img{
	max-width: 100%;
	height: auto;
	margin: 1em auto;
	vertical-align: bottom
}

.content_wrap p{
	line-height: 2.2;
	font-weight: 400;
	margin-bottom: 1.2em
}

.content_wrap table{
	border: solid 1px #ccc;
	width: 100%;
	margin: .5em auto;
}/*
.content_wrap table tr:first-of-type{
	background: #eee;
	font-weight: bold;
	text-align: center;
}*/

.content_wrap ul,
.content_wrap ol{
	padding-left: 1em;
}
.content_wrap ul li{list-style: disc}
.content_wrap ol li{list-style: decimal}

#single_news a.btn1,
#single_blog a.btn1{
	max-width: 400px
}

/* single sidemenu */
.side_archive{margin-bottom: 4em;}
.side_archive_list{margin-bottom: 1em}
.side_archive_list a{padding: 0}
.side_archive_list figure{width: 35%}
.side_archive_list a >div{width: 62%}
.side_archive_list h3{font-size: 1em}



.wp-block-tag-cloud a{
	background: #6E0A07;
	color: #fff;
	font-size: 11px!important;
	display: inline-block;
	line-height: 1;
	padding: .5em;
	border-radius: 2px;
	margin-right: 8px
}
.wp-block-tag-cloud a:before{
	font-family: icomoon;
	content: '\e935';
	display: inline-block;
	margin-right: .5em;
}
#single_blog .btn_wrap,
#single_news .btn_wrap{text-align: center}
#single_blog a.btn1,
#single_news a.btn1{margin: 0 auto;}

#single_news .date{display: inline-block;margin-right: 2em}
#single_news .content_title {padding-bottom: .3em}

.side_news_list{
	border-bottom: solid 1px #ccc;
	padding: .5em 0;
}
.side_news_list span.date{
	display: inline-block;
	margin-right: 1em!important
}

.side_news_list a{color: #000}

/******　目次　******/

#toc_container{
	width: 100%;
	max-width:700px;
	margin: 4.5em auto;
	padding: 1em 2em
}
#toc_container a{color: #000}

#toc_container li{
	margin: .5em auto
}
#toc_container li li{
	display: none
}

.gogo-point-grid > p,
.gogo-point-grid > br {
  display:none !important;
}
.gogo-point-grid > div {
  min-width:0;
  box-sizing:border-box;
}

/***********************************
  archive (news)
***********************************/
.archive_news_list dl{
	border-bottom: solid 1px #ccc;
	padding: .5em 0;
	justify-content: center
}
.archive_news_list dt,
.archive_news_list dd{
	width: 100%;
	margin-bottom: .5em;
}
.archive_news_list dt{
	justify-content: flex-start;
	align-items: center;}
.archive_news_list dt .cat{margin-left: 1.5em}
.archive_news_list a{color: #000}
.archive_news_list a:hover{
	text-decoration: underline;
	color: #E60216
}
@media (min-width:668px){
	.archive_news_list dt{width: 20%}
	.archive_news_list dd{width: 70%}
}

/***********************************
  pager
***********************************/
.pager{text-align: center;padding: 2em 0}
.pager span.current,
.pager a.page-numbers{
	display: inline-block;
    background: var(--color-green);
    text-align: center;
    border-radius: 50%;
    margin-right: .5em;
    color: #fff;
    font-weight: bold;
    width: 40px;
    height: 40px;
    line-height: 40px;
}
.pager a.prev,
.pager a.next{
	background: none!important;
	color: #000!important
}

.pager a.page-numbers{
	background: none;
    color: #303030;
	text-decoration: none
}
.pager a.page-numbers:hover{
	opacity: .8
}


/***********************************************************
   contact
************************************************************/
.contact_info{
	margin: 3em auto;
}
.contact_info_inner{
	padding: 2em 1em;
	border-radius: 5px;
	text-align: center;
	border: solid 2px var(--main-color);
}
.contact_info_inner > p{
	font-weight: bold;
	font-size: 1.2em;
	margin-bottom: 1em;
}


/*-------------------------
 
  footer_contact

----------------------------*/
.footer_contact{
	background: var(--bg-color);
	padding: 3em 0;
	text-align: center;
	margin: 10em auto;
}
.footer_contact h3{
	font-weight: bold;
	font-size: clamp(1.6rem, 1.091rem + 2.55vw, 3rem);
	line-height: 1.6;
	margin-bottom: .3em;
}
.footer_contact > p{
	font-size: 1.1em;
	font-weight: bold;
}


.contact__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (min-width: 1000px) {
    .contact__inner {
        flex-direction: row;
        align-items: flex-start;
        gap: 3.75rem;
        padding: 3.25rem 0;
    }
}

.contact__tel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.3rem;
    white-space: nowrap;
}

@media screen and (min-width: 1000px) {
    .contact__tel {
        padding: 0;
    }
}

.contact__tel-number {
    display: inline;
    text-align: center;
    font-size: clamp(2rem, 1.273rem + 3.64vw, 4rem);
    line-height: 1;
    color: var(--main-color);
    margin: 0;
	font-family: "Barlow", sans-serif;
  	font-weight: 600;
  	font-style: normal;
}
.contact__tel-number a{
	font-weight: 600;
	color: var(--main-color)
}

.contact__tel-number::before {
    content: "TEL.";
    display: inline;
     font-family: "Barlow", sans-serif;
  	font-weight: 600;
  	font-style: normal;
    font-size: clamp(1rem, 0.636rem + 1.82vw, 2rem);
    line-height: 1.5;
    color: var(--main-color);
    margin-right: 0.8rem;
}


.contact__inner .contact__button {
    flex: 0 0 auto;
}

.contact__button .cta-btn a {
    padding: 1.5rem 4em;
	background: #FF7EA6;
	border-radius: 8px;
	color: #fff;
	font-weight: bold;
	display: block;
}
.contact__button .cta-btn a i{
	margin-right: 10px;
} 

@media screen and (min-width: 1000px) and (max-width: 1099px) {
   
    .contact__button .cta-btn a {
        padding: 1.3rem 4em;
        font-size: 1.1rem;
    }
}

@media screen and (min-width: 1100px) and (max-width: 1199px) {
   
    .contact__button .cta-btn a {
        padding: 1.5rem 4em;
        font-size: 1.3rem;
    }
}

.contact_time{
	gap:40px;
	justify-content: center;
}
.contact_time dl{
	justify-content: center;
	gap:10px;
}
@media (max-width:667px){
	.contact_time{
		gap:25px;
	}
	.contact_time{
		margin: 2em auto;
		flex-direction: column;
	}
}
/***********************************
 form
***********************************/
.form_title{
	text-align: center;
	margin: 3em auto;
}
.form-flow {
    margin: 3em auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center
}
.form-flow > li {
    margin: .5em 0;
	width: 48%;
    background: #ccc;
    padding: .8em;
    text-align: center;
    border-radius: .3em;
    color: #a7a7a7;
	font-weight: 400;
	letter-spacing: 1px
}
.form-flow li.pickup {
    background: var(--main-color)!important;
    color: #fff;
}
#page_reserve .form-flow li.pickup {background: #e60514!important}
.form-att-b{font-weight: bold;}
.form-att{
	color:red;
	font-weight: bold;
}

#check .form-att{color: #000}

.form_att{
	color: red;
    margin: 1em auto;
    font-size: 13px;
    line-height: 1.5;
}

/*  form  */

#form{margin: 3em auto}
#form .reserve_title{
	font-weight: bold;
    font-size: 1.5em;
    padding-bottom: .5em;
    max-width: 1200px;
    margin: 1em auto;
    background: #f5e6e7;
    padding: 1em .5em;
    letter-spacing: 1px;
}
#form dl{
	border-bottom: solid 1px #ccc;
	padding: 1em 0;
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
#form dt,
#form dd{
	padding: .3em 0;
	margin: 0;
	font-size: 1em;
	font-weight: 400;
	letter-spacing: 1px
}
@media screen and (max-width:668px){
	#form dt,#form dd{width: 100%}
}
@media screen and (min-width:668px){
	#form dt{width: 26%;margin-right: 4%}
	#form dd{width: 65%;}
}

#form dt small{
	display: block;
	margin-left: 45px
}

#form input[type="text"],
#form input[type="email"],
#form input[type="url"],
#form textarea,
#form input[type="tel"]{
	border: solid 1px #b6b6b6;
    border-radius: 5px;
    padding: 1em .5em;
    margin: 0;
    font-size: 16px;
    width: 100%;
    box-sizing: border-box;
}

input[type="text"].tel,
input[type="text"].zip{padding: 1em}
input[type="text"].your_birth{width: 25%!important}
input[type="text"].your_old{width: 20%!important}

#old_wrap{display: inline-block;}

textarea{line-height: 1.6;font-weight: 400}

@media screen and (max-width:668px){
	input[type="text"].tel,
	input[type="tel"].zip{width: auto!important;}
}
@media(min-width:668px){
	input[type="text"].tel,
	input[type="tel"].zip{width: 10%!important}
	input[type="text"].your_birth{width: 15%!important}
}

#zip_wrap {margin-bottom: .8em;}
#zip{width: 60%!important}
@media(min-width:668px){
	#zip{width: 30%!important}
}
#zip_wrap span{display: inline-block;margin-left: .5em;}
.confirm #zip_wrap span{display: none}

input[type="text"].w-100,
#form input[type="email"].w-100,
textarea.w-100{width: 100%}

#busyo{display: flex;justify-content: space-between}
#busyo input[type="text"]:first-of-type{width: 58%}
#busyo input[type="text"]:last-of-type{width: 40%}

.mwform-radio-field{margin: 1em 1em 1em 0}
.c_info dd{
	display: flex;
	flex-direction: column;
	justify-content: flex-start
}
.c_info dd span{
	margin: .5em 0;
	margin-left: 0!important;
	font-size: .9em
}
.com_name dd{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between
}
.com_n1{width: 60%!important;}
.com_n2{width: 30%!important;}
.mwform-zip-field{display: block}

/*-- submit --*/
input[type="submit"]{
	display: block;
    width: 90%;
    max-width: 250px;
    background: var(--main-color);
    text-align: center;
    padding: 1em;
    border: none;
    margin: 3em auto;
    border-radius: 2em;
    color: #fff;
    font-weight: 400;
	outline: none
}

input[type="submit"].back{background: #ccc}
input[type="submit"]{appearance: none;}
.error{margin: .5em auto}
.privacy_check{text-decoration: underline}
/*-- thanks --*/
.thanks_message h3 {
    margin: 1em auto;
    font-size: 1.5em;
    font-weight: 500;
}
.thanks_message > p {
    line-height: 1.8em;
	margin-bottom: 2em;
	font-weight: 400
}
.thanks_message .contact_tel_wrap{margin-bottom: 2em}
.thanks_message .contact_tel_wrap p{margin-bottom: 0}
.thanks_message a.btn1 span:after{display: none}


/*-- 必須・任意 --*/
.hissu:before,
.nini:before,
.jidou:before{
	padding: .3em;
	color: #fff;
	margin-right: 10px;
	display: inline-block;
	font-size: 12px;
	line-height: 1;
	width: 30px;
	text-align: center
}

.hissu:before{
	content: '必須';
	background: #f17676;
}
.nini:before{
	content: '任意';
	background: #9b9b9b;
}
.jidou:before{
	content: '自動入力';
	background: #333;
	width: 60px
}
#form .form_title{
	color: #B60F41;
	font-size: 1.2em;
	padding: .5em 0;
	border-bottom: solid 1px #B60F41;
	margin-bottom: 1em;
	font-weight: bold;
	margin-top: 3em
}
#form .form_title:first-of-type{margin-top: 0;}
#form dd a{color: #000}



/**********************************
  施工見積もり・予約フォーム
**********************************/
.sekou_check{align-items: flex-start!important}

.sekou_check > span{
	display: inline-block;
	width: 100%;
	margin: 0!important
}
@media (min-width:668px){
	.sekou_check > span{width: 48%}
}

input.car_model[type="text"]{
	width: 100%!important;
	height: 3em;
	margin-bottom: .5em!important
}

/*-- select-reset --*/
.car_select_wrap {
    display: inline-flex;
    align-items: center;
    position: relative;
	width: 100%
}

.car_select_wrap:after {
    position: absolute;
    right: 30px;
    width: 10px;
    height: 7px;
	top: 23px;
    background-color: #535353;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
    pointer-events: none;
}
#check .car_select_wrap:after {
	display: none
}
.car_select_wrap select {
    appearance: none;
    min-width: 230px;
	width: 100%;
	height: 3em;
    padding: .5em calc(.8em + 30px) .5em .8em;
    border: 1px solid #b6b6b6;
    border-radius: 5px;
    background-color: #fff;
    color: #333333;
    font-size: 1em;
    cursor: pointer;
}

.car_model_wrap{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: .5em;
	width: 100%;
}

.form_car_title{
	width: 20%;
	display: block
}
@media (max-width:667px){
	.radio_wrap span.mwform-radio-field{
		width: 100%;
		display: inline-block;
		margin: 0!important
	}
}
@media (min-width:668px){
	input.car_model[type="text"]{
		width: 58%!important;
		margin-bottom: 0!important
	}
	.car_select_wrap {width:40%!important}
}
@media screen and (max-width:999px){
	.reserve_form dt,
	.reserve_form dd{width: 100%!important;}
}

@media screen and (min-width:1000px){
	.reserve_form dt{
		width: 25%;
		margin-right: 5%
	}
	.reserve_form dd{width: 65%;}
}