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

@media screen and (max-width:736px) {
	html, body {
		min-width: 0;
		width: 100%;
		height: 100%;
		-webkit-text-size-adjust : 100%;
	}

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

	.sp_only {display: inherit;}
	.pc_only {display: none;}
	
	a[href^="tel:"] {
		pointer-events: auto;
	}
	
	input[type="submit"] {
	  appearance: none;
	  -webkit-appearance: none;
	}
	
	/*-----------------------------

	header /footer

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

	header {display: none;}
	#pan,
	#pan a {font-size: 1.1rem;}
	
	.sp-ttl {
		width: 12rem;
		padding: 2rem 0 0 2rem;
	}
	
	footer p {
		font-size: 1.2rem;
		padding: 2rem 0 4rem;
	}
	
	.inner {
		padding: 3rem;
	}

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

	main-contents

	------------------------------*/
	#main-fv{
		
	}
	
	#main-contents {
		width: calc(100% - 0);
		min-width: 100%;
		position: relative;
		left: 0;
		padding: 2rem 2rem;
	}

	.area {margin-bottom: 5rem !important;}
	p.txt {
		font-size: 1.4rem;
		line-height: 2;
	}
	
	/*-----------------------------

	top

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

	#main-fv {
		position: relative;
		margin-bottom: 5rem;
	}
	
	img.top-fv {
		height: 260px;
		object-fit: cover;
		object-position: center right;
	}
	
	#main-fv .main-ttl {
		width: 60%;
		position: absolute;
		top: auto;
		left: 1.5rem;
		bottom: 1.5rem;
	}
	
	h2.ttl {
		font-size: 3rem;
		text-align: center;
		margin-bottom: 2rem;
	}


	h2.ttl span.ttl_jp {
		font-size: 1.4rem;
		padding-left: 0;
		display: block;
	}

	h2.ttl span.circle {
		position: absolute;
		top: 0rem;
		right: -1rem;
		font-size: 1rem;
	}
	
	.reason-list {
		flex-wrap: wrap;
	}
	
	.reason-area ol li + li {margin-top: 2rem;}
	.reason-area ol li .reason-info,
	.reason-area ol li .reason-img{
		width: 100%;
		max-width: 100%;
	}

	.reason-area ol li:nth-child(even) .reason-list {
		flex-direction: row-reverse;
	}
	
	.reason-area ol li .reason-info {
		padding-right: 0;
		position: relative;
	}
	
	.reason-area ol li .reason-info dl.reason-no dt{
		position: absolute;
		top: 10px;
		left: 0px;
		font-size: 1.6rem;
		width: 50px;
		height: 50px;
		line-height: 50px;
	}
	
	.reason-area ol li .reason-info dl.reason-no dd{
		display: none;
	}
	
	.reason-area ol li .reason-info dl.reason-no{
		margin-bottom: 0px;
	}

	.reason-area ol li .reason-info h3 {
		font-size: 1.8rem;
		margin-bottom: 1.5rem;
		padding-left: 65px;
	}
	
	.reason-area ol li .reason-info img {
		border-radius: 15px;
		margin-bottom: 1rem;
	}
		
	.reason-area ol li .reason-info p {
		font-size: 1.3rem;
		line-height: 1.8;
		margin-bottom: 0;
	}
	
	.reason-area ol li:nth-child(even) .reason-info {
		padding: 0;
	}
	
	.service-area ul li dl {
		align-items: center;
		flex-wrap: wrap;
	}
	
	
	.service-area ul li dl dt {
		width: 100%;
		max-width: 100%;
	}

	.service-area ul li dl dd {
		width: 100%;
		max-width: 100%;
		padding-left: 0;
	}
	
	.service-area ul li dl dt img {margin-bottom: 2rem;}
	
	.service-area ul li dl dd h3 {
		font-size: 1.8rem;
		margin-bottom: 2rem;
	}

	.service-area ul li dl dd p {
		font-size: 1.4rem;
		font-weight: bold;
		position: relative;
	}
	
	.service-area ul li dl dd p::before {
		
	}
	

	.works-area ul {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap: 1rem 2.2rem;
	}
	
	.news-area ul li .news-inner {align-items: center;}
	.news-area ul li .news-inner .news-thumbnail {
		width: 35%;
		max-width: 35%;
		height: 10rem;
	}

	.news-area ul li .news-inner .news-info {
		width: 65%;
		max-width: 65%;
		padding-left: 2rem;
	}

	.news-area ul li .news-inner .news-thumbnail img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 5px;
	}

	.news-area ul li .news-inner .news-info h3 {
		font-size: 1.4rem;
		margin-bottom: 1rem;
	}

	.news-area ul li .news-inner .news-info .news-cat {
		font-size: 1rem;
	}

	.news-area ul li a {
		display: block;
		background: #fff;
		padding: 1rem;
		border-radius: 15px;
	}
	
	/*-----------------------------

	service

	------------------------------*/
	.service-fv {margin-bottom: 5rem;}
	.service-fv .service-main {
		margin-bottom: 0;
	}
	
	.service-fv .service-main, .service-fv .service-img {
		width: 100%;
		max-width: 100%;
	}
	
	.service-fv .service-main h2 {
		font-size: 3rem;
		text-align: center;
	}
	
	.service-fv .service-main p {
		font-size: 1.4rem;
		padding-top: 2rem;
		margin-bottom: 4rem;
	}
	
	.features-area ul li {padding-bottom: 2rem;}
	.features-area ul li + li {margin-top: 2rem;}

	.features-area ul li h3 {
		font-size: 1.8rem;
		text-indent: 3rem;
	}

	.features-area ul li p {
		font-size: 1.4rem;
	}
	
	.price-area ul.price-contents {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap: 1rem 1.2rem;
		margin-bottom: 5rem;
	}
	
	dl.plan-list {
		display: flex;
		align-items: flex-start;
	}
	
	dl.plan-list dt {padding: 0 2rem 0 0;}
	.price-area ul li dl.plan-list + dl {margin-top: 1rem;}
	.btn-contact {width: 100%;}

	.price-area h3.service-ttl {
		font-size: 1.6rem;
	}	
	
	.price-area ul.service-list {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
	}
	
	.price-area ul.service-list li {
		padding: 1.5rem;
	}

	.price-area ul.service-list li h4 {
		font-size: 1.6rem;
	}

	.price-area ul.service-list li p {
		font-size: 1.3rem;
		font-weight: 500;
	}
	
	.option-service {padding-right: 0;}
	.option-area {
		flex-wrap: wrap;
		align-items: center;
	} 
	.option-area h3{
		width: 100%;
		max-width: 100%;
		font-size: 1.6rem;
		text-align: center;
		margin-bottom: 2rem;
	} 
	
	.option-area h3 span{
		display: block;
		font-size: 2.6rem;
	} 

	.option-area .option-info {
		width: 100%;
		max-width: 100%;
		border-left: none;
		padding: 0 3rem 0 0;
	}
	
	.option-area .option-info ul li.option-list {
		border-bottom: 1px solid #ccc;
		padding-bottom: 1rem;
	}
	.option-area .option-info ul li.option-list dl dt::before {
		border-top: none;
	}

	
	.option-area .option-info ul li.option-list dl dt {
		width: 50%;
		max-width: 50%;
		font-size: 1.3rem;
		font-weight: 500;
	}

	.option-area .option-info ul li.option-list dl dd{
		width: 50%;
		max-width: 50%;
		font-size: 1.3rem;
		font-weight: 600;
		text-align: right;
	}

	.option-area .option-info ul li.option-list dl dd span{
		font-size: 1.3rem;
		font-weight: 500;
	}

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

	page

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

	.page-ttl {
		position: absolute;
		right: 2rem;
		bottom: 2rem;
	}

	img.page-fv {
		height: 240px;
		border-radius: 15px;
		object-fit: cover;
	}

	.page-ttl h2 {
		font-size: 1.6rem;
		font-weight: 500;
		color: #fff;
		text-align: right;
	}

	.page-ttl h2 span {
		display: block;
		font-size: 4rem;
		line-height: 1em;
		padding-top: 0;
	}

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

	company

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

	.outline-area {}

	.outline-area dl {
		border-bottom: 1px solid #DDDDDD;
		padding-bottom: 2.5rem;
	}
	.outline-area dl + dl {margin-top: 2.5rem;}
	.outline-area dl dt {
		width: 30%;
		max-width: 30%;
		font-size: 1.3rem;
	}

	.outline-area dl dd {
		width: 70%;
		max-width: 70%;
		font-size: 1.3rem;
	}

	.message-area .message-info {
		align-items: center;
		margin-bottom: 2.5rem;
	}

	.message-area .message-name {
		width: 100%;
		max-width: 100%;
	}

	.message-area .message-name h3 {
		font-size: 3.2rem;
		font-weight: bold;
		text-align: center;
	}
	
	.message-area .message-name img {
		margin-bottom: 1rem;
	}

	.message-area .message-img {
		width: 100%;
		max-width: 100%;
	}

	.message-area .message-img img {
		width: 100%;
		border-radius: 10px;
	}

	.message-area p.txt {
		font-size: 1.3rem;
	}

    .message-name h3 {
        font-size: 2.8rem;
        font-weight: bold;
        letter-spacing: 0.1rem;
        padding-top: 0rem;
        margin-bottom: 1rem;
        padding-bottom: 25px;
        position: relative;
    }
	
	.message-name h3::before {
		content: '';
		position: absolute;
		top: auto;
		bottom: 10px;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 30px;
		border-top: 1px solid black;
	}

	.message-name h3 span {
		display: block;
		font-size: 1.4rem;
		font-weight: 600;
		letter-spacing: 0.01rem;
		padding-top: 1rem;
	}

	.message-name p {
		text-align: center;
	}

	.philosophy-area h3 {
		font-size: 2.4rem;
		line-height: 1.8;
		font-weight: 900;
		margin-bottom: 3rem;
		text-align: center;
	}

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

	works

	------------------------------*/
	.works-ingle {padding-bottom: 5rem;}
	.works-ingle h2 {
		font-size: 1.8rem;
		padding-bottom: 2rem;
		margin-bottom: 2rem;
		color: #333333;
	}
	
	.works-ingle h3 {
		font-size: 1.6rem;
	}
	
	.works-ingle .client-info dl dt {
		width: 40%;
		max-width: 40%;
	}

	.works-ingle .client-info dl dd {
		width: 60%;
		max-width: 60%;
	}

	.works-ingle .client-info dl dt,
	.works-ingle .client-info dl dd{
		font-size: 1.4rem;
		font-weight: 500;
	}
	
	/*-----------------------------

	news

	------------------------------*/
	.news-cat .cat {
		display: inline-block;
		font-size: 1.3rem;
	}

	.news-single h1 {
		font-size: 2rem;
	}

	.news-single p.news-day {
		font-size: 1.4rem;
		margin-bottom: 1.5rem;
	}

	.news-single #single-txt p {
		font-size: 1.4rem;
	}
	
	.news-single .btn_single {
		flex-wrap: wrap;
		margin: 4rem auto;
	}
	
	.news-single .btn_single .btn a {;
	    font-size: 1.6rem;
	}
	
	.news-single .btn_single .btn{
		width: 100%;
		max-width: 100%;
		margin: 1rem 0;
	}
	
	.news-single #single-txt ul, 
	.news-single #single-txt ol {
	    padding: 2rem;
	}
	
	.news-single #single-txt ol li {
		font-size: 1.4rem;
	}
	
	.news-single #single-txt ul li b,
	.news-single #single-txt ol li b {
		font-size: 1.6rem;
	}

	.news-single h2 {
		font-size: 1.8rem;
	}

	.news-single h3 {
		font-size: 1.6rem;
		padding: 1rem 2rem;
	}

	.news-nav {
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}
	.news-nav .arrow {
		width: 100%;
		text-align: center;
	}
	.news-nav .arrow a {
		font-size: 1.6rem;
		font-weight: bold;
	}

	.news-nav .news-btn {
		width: 100%;
		text-align: center;
		margin: 2rem 0;
	}
	
	/*-----------------------------

	term

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

	.term-area {}
	.term-area p.txt,
	.policy-area p.txt{
		font-size: 1.4rem;
		line-height: 2;
	}
	
	.term p.term_txt, .policy p.policy_txt {
		font-size: 1.4rem;
		line-height: 2;
	}

	.policy + .policy {margin-top: 2.5rem;}

	.privacy_area h3 {font-size: 1.6rem;}
	p.term_ttl {
		font-size: 1.6rem;
	}
	
	table.company-table, 
	table.company-table td, 
	table.company-table th {
		border: 0.5px solid #595959;
	}

	table.company-table td, 
	table.company-table th {
		width: 100%;
		display: block;
		padding: 1rem;
		font-size: 1.2rem;
	}
	
	/*-----------------------------

	contact

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

	.contact-area {}
	.contact-area p.txt {
		text-align: left;
		font-size: 1.4rem;
	}
	
	.works-ingle .client-info dl dd a{
		display: block;
		margin-top: 7px;
		margin-left: 0px;
	}
	
	.news-area ul li .news-inner .news-info .day{
		font-size: 1.2rem;
		margin-bottom: 1rem;
	}
	
	.reason-area h2.ttl{
		text-align: left;
	}
	
	/*-----------------------------

	voice

	------------------------------*/
	
	.voice-area ol{
		display: block;
		overflow-x: hidden;
	}
	
	.voice-area li{
		min-width: 100%;
		width: 100%;
		max-width: 100%;
		margin-bottom: 15px;
		border-radius: 15px;
		margin-right: 0;
	}
	
	.voice-area li h3{
		font-size: 1.5rem;
	}
	
	.voice-area li p{
		font-size: 1.4rem;
		padding: 15px 0px 7px;
	}
	
	.voice-area li b{
		font-size: 1.3rem;
	}
	
	/*------------0710------------------*/
	#main-fv {
	    margin: 4rem auto 0;
	}
	
	h2#catchy {
	    font-size: 2rem;
	    padding-top: 5rem;
    }

	ul#catchy-circle {
	    padding-top: 25px;
	    text-align: center;
	    display: flex;
	    flex-wrap: wrap;
	    justify-content: center;
	    gap: 10px;
	}
	
	ul#catchy-circle li {
	    position: relative;
	    border: 2px solid #333;
	    color: #333;
	    text-decoration: none;
	    font-weight: 900;
	    width: 45vw;
	    height: 45vw;
	    margin: 0;
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	    align-items: center;
	    padding-top: 0;
	    border-radius: 50%;
	    font-size: 1.8rem;
	}
	
	ul#catchy-circle li span {
	    display: block;
	    font-weight: 700;
	    font-size: 1.2rem;
	}
	
	ul#catchy-circle li:before {
	    content: "";
	    border: 1px solid #333;
	    position: absolute;
	    top: 0px;
	    left: 0px;
	    right: 0px;
	    bottom: 0px;
	    margin: auto;
	    width: calc(100% - 14px);
	    height: calc(100% - 14px);
	    border-radius: 50%;
	}
	
	.scroll-infinity__wrap {padding-bottom: 30px;}
	 .scroll-infinity__item {
		width: calc(100vw / 2);
	}
    
   ul.feature-list {
	    border-left: none;
	    display: flex;
	    flex-wrap: wrap;
    }
    
	ul.feature-list li {
	    border-right: none;
	    padding: 2rem 0;
	    border-bottom: 1px solid #ccc;
	    width: 100%;
	    text-align: center;
	    vertical-align: top;
	}
	
	ul.feature-list li h3 {
	    font-size: 20px;
	    text-align: center;
	    font-weight: bold;
	    line-height: 2;
	}
	
	.sp_area {
        padding: 0;
        border-radius: 5px;
        background: #FFFF00;
		margin-top: 3rem;
	}
	.sp_btn a {
		display: block;
		padding: 2rem;
		border-radius: 20px;
		background: #fff;
		font-size: 18px;
		font-weight: bold;
		background: #FFFF00;
		color: #333;
	}
    
    .contact-area .contac-area {
	    padding: 3rem 0;
    }
    
    #form_submit input {
	    width: 100%;
    }
    
    
    

	
}