@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');
@media screen and (max-width:736px) {
	html, body {
		min-width: 0;
		width: 100%;
		height: 100%;
		-webkit-text-size-adjust : 100%;
		font-family: 'Zen Maru Gothic', sans-serif;
		overflow-x: hidden;
	}

	img {
		max-width: 100% !important;
		height: auto;
	}

	.sp_only,
	#tel{
		display: inherit;
	}
	
	.pc_only {
		display: none !important;
	}
	
	a[href^="tel:"] {
		pointer-events: auto;
	}
	
	input[type="submit"] {
	  appearance: none;
	  -webkit-appearance: none;
	}
	
	#main-list{
		position: static;
		flex-wrap: wrap;
		justify-content: center;
		gap: 5px;
	}
	
	#main-list li {
	    width: calc((100% - 20px) / 3); /* 3列になる幅 */
	    max-width: 80px;
	    height: 80px;
	    font-size: 1.2rem;
	}
	
	  /* 最後の2つを2列にするための調整 */
	#main-list li:nth-child(4),
	#main-list li:nth-child(5) {
		width: calc((100% - 10px) / 2); /* 下段2列 */
	}
	
	#line,
	#zoom,
	#tel{
		z-index: 9;
	}
	
	#zoom{
		bottom: 0;
		right: 0;
	}
	
	#line{
		right: 0;
		bottom: 85px;
	}
	
	#zoom img,
	#line img,
	#tel img{
		width: 90px;
	}
	
	#tel{
		position: fixed;
		right: 0;
        bottom: 170px;
        z-index: 9;
	}
	
	/*-----------------------------

	header

	------------------------------*/
	.sp_nav {
		position: relative;
		z-index: 10;
	}
	header {z-index: 2;}
	header .hd-inner .hd-info {display: none;}	

	/*-----------------------------

	lp

	------------------------------*/

	#main-fv {
		background: url("../img/page/lp/main-fv.jpg");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: left -30px center;
		padding: 4rem 2rem 5rem;
		position: relative;
		margin-top: 8rem;
	}

	#main-fv .main-ttl {
		text-align: center;
		font-size: 3.4rem;
		line-height: 1.8;
		z-index: 1;
		padding-bottom: 15px;
	}
	
	
	#main-fv ul li {
		width: 250px;
	}
	
	/*#main-fv ul{
		display: block;
		position: relative;
	}*/
	
	#main-fv ul li.bird1{
		left: -40px;
		right: auto;
		top: 80px;
		width: 250px;
	}
	
	body{
		overflow-x: hidden;
	}
	
	#main-fv ul li.bird2{
		margin-left: auto;
		margin-top: -100px;
		margin-right: -45px;
	}
	
	
	.about-bg {
		background: url("../img/page/lp/bg-right.png");
		background-repeat: no-repeat;
		background-position: top 10% right;
		background-size: 30% auto;
		padding-bottom: 10rem;
	}
	
	#main-fv ul li.bird2 img{
		height: 100%;
	}
	
	.page-top h2 {
		font-size: 2.4rem;
		padding-top: 8rem;
		margin-bottom: 2rem;
	}
	
	h2.page-ttl {
		font-size: 2.6rem;
		padding-top: 8rem;
	}

	.page-top p {
		font-size: 1.7rem;
		line-height: 2;
		padding: 0 3rem;
		padding-top: 10rem;
	}
	
	
	.top-strengths {padding-bottom: 5rem;}
	.top-strengths ul li h3 {
	    font-size: 2rem;
	    padding-top: 6rem;
	    margin-bottom: 1rem !important;
	}

	.top-strengths h2 {
		margin-bottom: 4rem !important;
	}

	.top-strengths ul {margin-bottom: 5rem; flex-wrap: wrap;}
    .top-strengths ul li {
        width: 340px;
        max-width: 340px;
        min-height: auto;
        background:none;
        background-size: 340px 422px;
        padding: 7rem 5rem 5rem;
        background-color: #fff;
        border: 5px solid #ccc;
        position: relative;
        box-sizing: border-box;
        margin: 0 auto;
    }
	
	.top-strengths ul li + li {margin-top: 4rem;}
	
	.top-strengths ul li .icon {
		 position: absolute;
		 top: 0;
		 left: 0;
		 right: 0;
		 margin: 0 auto;
		 border-radius: 50%;
		 text-align: center;
		 padding-top: 2rem;
	}

	.top-strengths ul li p {
		font-size: 1.5rem;
		font-weight: bold;
		line-height: 1.8;
	}	
	
	.tab-container {
		height: auto;
		line-height: 1.8;
		font-size: 1.4rem;
	}
	
	.tab-container .tab {padding: 1rem 0;}
	.content-container {padding: 3rem 1rem;}
	
	.content-container ol li.step_list dl {
		z-index: 1;
	}

	.content-container ol li.step_list dl dt {
		font-size: 2.2rem;
	}
	
	.content-container ol li.step_list dl dd h3 {
		font-size: 1.6rem;
	}
	
	.content-container ol li.step_list .step_info {
		width: 88%;
		background: #fff;
		border-radius: 20px;
		padding: 2rem;
		margin: 0 0 0 auto;
	}
	
	.content-container ol li.step_list::before {
		top: 0;
		left: 7.4%;
		width: 3px;
	}

	.content-container ol li.step_list .step_info ul {
		flex-wrap: wrap;
		padding: 0 2rem;
	}	
	
	.content-container ol li.step_list .step_info ul li {
		font-size: 1.4rem;
		margin-right: 4rem;
		padding: .5rem 0;
	}
	
	.content-container ol li.step_list .step_skill {
		width: 90%;
		padding: 3rem;
	}

	.content-container ol li.step_list .step_skill ul {flex-wrap: wrap;}
	.content-container ol li.step_list .step_skill ul li {
		width: 100%;
		max-width: 100%;
	}
	.content-container ol li.step_list .step_skill ul li + li {margin-top: 2rem;}

	
	.training-area01 ol {flex-wrap: wrap;}
	.training-area01 ol li,
	.training-programs02 ol li{
		width: 100%;
		max-width: 100%;
		border-radius: 20px;
		padding: 1.5rem 1rem;
		margin-bottom: 2rem;
	}

	.training-programs02 ol {margin-bottom: 5rem; flex-wrap: wrap;}
	.training-programs02 ol li{padding: 1.5rem 2rem;}

	 .training-programs02 ol li .img{
		text-align: center;
		padding-bottom: 2rem;
	}

	.training-area01 ol li {}

	.training-area01 ol li dl {margin-bottom: 4rem;}
	.training-programs02 ol li dl {align-items: center; margin-bottom: 2rem;}
	
	.training-area01 ol li dl dt,
	.training-programs02 ol li dl dt{
		font-size: 4rem;
		margin-right: 1rem;
	}

	.training-area01 ol li dl dd,
	.training-programs02 ol li dl dd{
		font-size: 1.8rem;
	}

	.training-programs02 ol li p {
		font-size: 1.4rem;
	}

	.training-programs {margin-bottom: 5rem;}
	.training-programs .inner {
		border-radius: 20px;
		padding: 0 2rem 3rem;
	}

	.training-area01 p, .training-programs p {
		font-size: 1.4rem;
		line-height: 1.6;
		font-weight: bold;
		margin-bottom: 3rem;
	}
	

	.info-inner {
		width: 90%;
		margin: 0 auto;
		padding: 3rem 0;
	}	
	
	.contact-address {flex-wrap: wrap;}

	.info-inner dl {
		width: 100%;
		max-width: 100%;
	}
	
	.info-inner dl + dl {margin-top: 3rem;}

	.info-inner dl dt {font-size: 1.6rem;}
	.info-inner dl dd {font-size: 3rem;}

	.info-inner dl dd span.tel01 {
		width: 10%;
        position: absolute;
        top: 0;
        left: 4%;
	}

	.info-inner dl dd span.tel02 {
		width: 10%;
        position: absolute;
        top: 0;
        left: 5%;
	}
	
	.info-inner p {
		font-size: 1.4rem;
		padding-bottom: 2rem;
	}

	.info-inner ul {flex-wrap: wrap;}
	.info-inner ul li {
		width: 100%;
		max-width: 100%;
	}
	
	.info-inner ul li + li {margin-top: 2rem;}

	.info-inner ul li a {
		font-size: 1.4rem;
		font-weight: bold;
		height: 60px;
		line-height: 55px;
	}

	.info-inner ul li.video a::before  {
	  content: "";
	  position: absolute;
	  top: 50%;
	  left: 10%;
	}

	.info-inner ul li.mail a::before  {
	  content: "";
	  position: absolute;
	  top: 50%;
	  left: 10%;
	}

	.info-inner ul li.line a::before  {
	  content: "";
	  position: absolute;
	  top: 50%;
	  left: 10%;
	}
	
	.flow-area .flow-step-img {
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
	}
	
    .flow-area .flow-step {
        width: 920px;
        border-radius: 20px;
        padding: 3rem;
    }

	.flow-area p {
		font-size: 1.4rem;
		line-height: 1.8;
		font-weight: 500;
		margin-bottom: 2rem;
	}
	
	.sp-table {
		box-sizing: border-box;
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
	}

	table.schedule-table {
		width: 920px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		table-layout: fixed;
	}
	
	.voice-area {
		padding: 0 0 10rem;
		margin-bottom: 0;
	}
	
	.voice-area ul {flex-wrap: wrap;}
	.voice-area ul li {
		width: 100%;
		max-width: 100%;;
	}
	
	.voice-area ul li + li {margin-top: 3rem;}
	
	.voice-area ul li .icon {margin-bottom: .5rem;}
	.voice-area ul li dl {margin-bottom: 1rem;}
	.voice-area ul li dl dt {
		font-size: 1.8rem;
	}
	.voice-area ul li dl dd {
		font-size: 1.8rem;
	}
	.voice-area ul li p {
		font-size: 1.4rem;
	}

	.faq-area {padding: 0 0 5rem;}

	.faq-area .faq-main {
		border-radius: 20px;
		padding: 2rem;
	}

	.accordion-faq {
		border-radius: 20px;
		padding: 2rem;
	}

	.accordion-header dl {align-items: center;}
	.accordion-header dl dt {
		font-size: 2rem;
		padding-right: 2rem;
	}

	.accordion-header dl dd {
		font-size: 1.4rem;
		padding-right: 4rem;
	}

	.accordion-content {
		padding: 2rem 0 0;
		margin-top: 2rem;
	}

	.accordion-content p {
		font-size: 1.4rem;
		line-height: 1.8;
	}


	.contact-area {
		padding: 0 0 5rem;
	}
	
	.contact-inner h2 {font-size: 2.4rem;}
	
	.contact-area .info-inner dl dd {font-size: 2.4rem;}
	.contact-area  .info-inner dl dd span.tel01 {
		position: absolute;
        top: 0;
        left: 4%;
	}

	.contact-area .info-inner dl dd span.tel02 {
		position: absolute;
        top: 0;
        left: 6%;
	}
	
	.contact-inner {
		padding: 5rem 3rem;
		margin: 5rem 0;
	}

	.contact-inner .tel-link {
		font-size: 3rem;
		font-weight: bold;
		text-align: center;
		margin-bottom: 1rem;
	}

	.contact-inner p.tel-time {
		font-size: 1.3rem;
		font-weight: bold;
		text-align: center;
		margin-bottom: 5rem;
	}
	
	h3.notes-ttl {font-size: 1.6rem;}

	ul.notes-list {
		padding: 0;
		margin-bottom: 0;
	}

	ul.notes-list li {
		font-size: 1.3rem;
		padding-left: 1em;
		text-indent: -1em;
	}
	
	ul.notes-list li + li {margin-top: 1rem;}
	
	/*--footer--*/

	footer {
		padding: 5rem 0;
	}

	footer .inner {flex-wrap: wrap;}
	footer .footer-logo {
		width: 100%;
		text-align: center;
		margin-bottom: 3rem;
	}
	

	footer .footer-info dl {flex-wrap: wrap;}
	footer .footer-info dl + dl {margin-top: 1rem;}
	footer .footer-info dl dt {
		width: 100%;
		font-size: 1.5rem;
		font-weight: bold;
		line-height: 1.8;
	}
	footer .footer-info dl dd {
		width: 100%;
		font-size: 1.5rem;
		font-weight: 500;
		line-height: 1.8;
	}

	footer .footer-info dl dd a:hover {opacity: .5;}

	p.copyright {
		padding-top: 5rem;
		font-size: 1.4rem;
	}
	
	.modal__content{
		width: 90%;
		border-radius: 20px;
	}

	.modal__content p{
		font-size: 1.5rem;
	}
	
	.btn_top {
		width: 80%;
		margin: 0 auto;
		position: relative;
	}

	.btn_top span {
		position: absolute;
		top: 0;
		right: 4rem;
	}

	.btn_top a {
		display: block;
		height: 56px;
		line-height: 56px;
		font-size: 1.4rem;
	}
	
	#thanks02 .contact-area,
	#confirm02 .contact-area {padding: 5rem 0 5rem;}
	
.wpcf7-submit {
		width: 100%;
		height: 66px;
		line-height: 66px;
	}

	.wpcf7-previous {
		width: 100%;
		margin-right: 0;
		margin-bottom: 2rem;
	}
	
	.contact-form table th,
	.contact-form table td{
		width: 100% !important;
		max-width: 100% !important;
		display: block;
		padding: 2rem 0 !important;
	}
	
	.contact-form table th {font-weight: bold;}
	.contact-form table td {font-size: 1.4rem;}

	.contact-form table td {
	    padding-left: 0;
	}
	
	.training-area01 h2{
		margin-bottom: 2rem;
	}


	.wpcf7-select {
	    width: 100% !important;
	    height: 60px !important;
	    padding: 1.5rem 2rem;
	}
	
	#service-img img{
		width: 90%;
	}
	
	.pp{
		padding: 30px;
		border-radius: 20px;
	}
	
	.top-step .inner{
		width: 100%;
	}


}