@charset "utf-8";

/* ===================================================================
CSS information

 File Name  : style.css
 Author     : 
 Style Info : レイアウトCSS設定
=================================================================== */
body.m_lp01{font-size: 18px;}

.text-orange{color: #F5A200;}
.w-900-9{width: 900px; margin: 0 auto;}
.p-0-2{padding: 0 20%;}
.fs24-20{font-size: 24px;} .fs20-18{font-size: 20px;}
.bg-cream{background: #FFF8E1;}

#mainNav{background: rgba(255,255,255,0.5); font-size: 16px; padding: 10px 0;}
.nav_covid .nav-link{color: #ec651a !important;background: rgba(255, 234, 89, .7);border-right: solid 2px #fff;}
.nav_covid .nav-link:hover{color: #6c757d !important;}
.navbar-nav li:last-of-type{background: #EC651A;}
.navbar-nav li:last-of-type .nav-link{color: #fff !important;}

header{position: relative;}
header.masthead .intro-text{padding: 200px 0 150px;}
.hdrtxt{position: absolute; bottom:20px; right: 20%;}
.hdrtxt p{background: rgba(255,255,255,0.7); line-height: 1.4;}
.hdrtxt p:nth-of-type(3),.hdrtxt p:nth-of-type(4){text-indent: 1em;}
header .btn{position: absolute; bottom:40px; right:50%; font-size: 24px; padding: 10px 2em;}

.offer{background: #F5A200; padding: 20px 0;}
.offr_rogo1{width: auto; height: 130px;}
.offr_rogo2{width: 80%;}
.btn-xl{width: 80%; padding: 7px 20px; font-size: 24px;}
.btn-01{background: #C2F5FF;}
.btn-02{background: #FFF829;}
.offer .LINE{width:900px; border: solid 1px #fff; border-radius: 20px;}
.offer .LINE>div p:first-of-type{line-height: 1;}
.offer .LINE_btn img{width: 80%; max-width: 280px;}
.offer .tel{font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; font-size: 60px; line-height: 1.4;}

#topics .row{padding: 5px 0; border-bottom: solid 1px #ddd;}

#support h3{margin-bottom: 40px;}
#support h4{margin: 20px 0;}
#support .col-md-4{border:solid 5px #fff; position: relative;}
#support .col-md-4:before{content: ""; border: solid 1px #c9c9c9;  border-radius: 20px; position: absolute; top: 3px; left: 3px; width: calc(100% - 10px); height: calc(100% - 10px);}

#concept .row img{width: 85%;}
.c_01{background:#FFF8E1 url("../img/renew/wht_bg.png") repeat-x; background-position: bottom 40px left 0; padding: 40px 0 8%;}
.c_02{background: url("../img/renew/img02.jpg")no-repeat top; background-size: contain; padding-top: 20%;}
.c_02 dt{background: #F5A200; font-size: 24px;}

#group .circle{width: 100%; max-width: 370px;}
.c_name div:first-child{text-align: right;}

#garden{background: #FFEEE1}
#garden img{width: 90%;}
#garden h4 span{font-size: 16px;}
#garden p a{text-decoration: underline;}

#staff img{width:100%;}

@media screen and (max-width:1200px) { 
/*　画面サイズが1200pxまではここを読み込む　*/
	
	#mainNav{font-size: 14px;}
}

@media screen and (max-width:992px) { 
/*　画面サイズが992pxまではここを読み込む　*/
	.img90{width: 90%;} .img80{width: 80%;}
	.w-900-9{width: 90%}
	.p-0-2{padding: 0 15%;}
	
	#mainNav .navbar-collapse {background: #ffebcce8; text-indent: 20px;}
	
	.hdrtxt{right: 5%;}

	.offer .LINE{width: 100%;}
	.LINE .text-white p:first-of-type{font-size: 16px;}
	.btn-xl{font-size: 20px;}
	.offer .LINE_btn img{width: 80%; padding: 3%;}
	.offer .tel{font-size: 42px;}
	
	#concept .c_01 .w-900-9, #support .w-900-9{width: 100%;}
	.c_02{padding: 20% 5% 0;}
}

@media screen and (max-width:768px) { 
/*　画面サイズが768pxまではここを読み込む　*/
	.mw-35{max-width: 350px;}
	.hdrtxt{bottom:0;}
	
	header.masthead .intro-text{padding: 120px 0;}
	.lead{font-size: 16px;}
	header .btn{bottom:30px; right:50%; font-size: 20px; padding: 10px 1em;}
	
	.page-section{padding: 30px 0;}
	
	.page-section h2.section-heading{font-size: 28px;}
	.page-section h3{font-size: 24px;}
	
	.offr_rogo1{width: auto; height: 80px;}
	.offr_rogo2{max-width: 350px;}
	.btn-xl{font-size: 18px; padding: 5px 20px;}
	.LINE .text-white p:first-of-type{font-size: 14px;}
	.offer .tel{font-size: 30px;}
	.offer .LINE_btn img{padding: 0 0 5px;; }
	
	#concept .row img{width: 70%;}
	
	#support .w-900-9{width: 90%;}
	
	#staff .col-md-4.mb-5{margin-bottom: 10px !important;}
}

@media screen and (max-width:576px) { 
/*　画面サイズが576pxまではここを読み込む　*/
	body.m_lp01{font-size: 16px;}
	.fs20-18{font-size: 18px;}
	.fs24-20{font-size:20px;}
	.p-0-2{padding: 0 10%;}
	
	header .btn{font-size: 16px; padding: 5px 10px; top:30%; bottom:auto; right:15%;}
	
	.page-section{padding: 20px 0;}
	.page-section h3{font-size: 18px;}
	h4{font-size: 20px;}
	
	.offr_rogo1{margin-bottom: 5px; height: 60px;}
	.offr_rogo2{max-width: 250px;}
	.offer .LINE{width: 70%;}
	.offer .LINE_btn img{width: 70%; max-width: 200px;}
	
	#concept .row img{width: 60%;}
	.c_name div:first-child{text-align: center;}
	.c_name div:last-child{text-align: center;}
	
	#support h3{margin-bottom: 20px;}
	
	#group .circle{max-width: 280px;}
}

@media screen and (max-width:415px) { 
/*　画面サイズが415pxまではここを読み込む　*/
	.page-section h2.section-heading{font-size: 20px;}
	.page-section h3{font-size: 16px;}
	
	.p-0-2{padding: 0 5%;}
	
	.lead{font-size: 14px;}
	header .btn{font-size: 14px; padding: 2px 10px; top:35%; bottom:auto; right:3%;}
	
	.offer .btn-xl{font-size: 16px; padding: 3px 20px;}
	.offer .LINE{width: 90%;}
	
	#concept .row img{width: 70%;}
	.c_01{background-size:contain;}
	.c_02 .w-900-9{width: 96%;}
	.c_02 dt{font-size: 16px; padding: 5px 2px !important;}
}