@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;
	}
	
	.service-cont ul li{
		display: block;
	}
	
	/*-----------------------------

	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-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;
		position: relative;
	}

	.reason-area ol li .reason-info h3 {
		font-size: 1.8rem;
		margin-bottom: .5rem;
		padding-left: 65px;
		position: relative;
	}
	
	.reason-area ol li .reason-info img {
		border-radius: 15px;
		margin-bottom: 2rem;
	}
		
	.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 dd {
		width: 100%;
		max-width: 100%;
		padding-left: 0;
	}
	
	.service-area ul li dl dd h3 {
		font-size: 1.8rem;
		margin-bottom: 2rem;
	}

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

	.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-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: 3rem;
		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.7rem;
		text-indent: 2rem;
	}
	
	.features-area ul li h3::before{
		left: -2rem;
	}

	.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{
		display: block;
	}
	.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: 100%;
		max-width: 100%;
		font-size: 1.3rem;
		font-weight: 500;
		border: none;
	}

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

	.option-area .option-info ul li.option-list dl dd span{
		font-size: 1.5rem;
		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: 0;
		color: #333333;
	}
	
	.works-ingle h3 {
		font-size: 1.6rem;
	}
	
	.works-ingle .client-info dl{
		display: block;
	}
	
	.works-ingle .client-info dl dt {
		width: 100%;
		max-width: 100%;
		border: none;
	}

	.works-ingle .client-info dl dd {
		width: 100%;
		max-width: 100%;
		border-bottom: 1px solid #ccc;
		padding-bottom: 10px;
		margin-bottom: 10px;
		padding-left: 0px;
		padding-top: 5px;
	}

	.works-ingle .client-info dl dt,
	.works-ingle .client-info dl dd{
		font-size: 1.4rem;
		font-weight: 500;
	}
	
	.works-ingle p.txt{
		font-size: 1.4rem;
		padding: 30px 0px;
		margin-bottom: 20px;
		border: none;
	}
	
	/*-----------------------------

	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 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;
	}
	
	#main-fv .main-ttl ul li{
		width: 35px;
		min-width: 35px;
		line-height: 35px;
		font-size: 18px;
	}
	
	.news-area ul li .news-inner .news-info .day{
		font-size: 1.2rem;
	}
	
	.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;
	}
	
	.service-fv .service-main ul li {
		width: 115px;
		height: 115px;
	}
	.service-fv .service-main ul li:before{
		width: 105px;
		height: 105px;
	}
	
	.service-fv .service-main ul li + li{
		margin-left: .5rem;
	}
	
	dl.faq-list dt{
		font-size: 1.4rem;
		padding-right: 50px;
	}
	
	dl.faq-list dd p.txt{
		font-size: 1.3rem;
	}
	
	.service-fv .service-main ul li p{
		font-size: 16px;
		padding-top: .5rem;
		line-height: 3rem;
	}
	
	.service-fv .service-main ul li p span{
		font-size: 30px;
		margin-right: 5px;
	}
	
	#hp-achievements #desktop{
		width: 300px;
		height: 225px;
		background-size: 300px 225px;
		margin-left: -20px;
	}
	
	#hp-achievements #desktop-img{
		/*
		top: 20px;
		left: 18px;
		width: 225px;
		*/
		top: 16px;
        left: 13px;
        width: 234px;
		height: 160px;
	}
	
	#hp-achievements #desktop-img img{
		/*height: 123px;*/
		height: 131px;
	}
	
	#hp-achievements #smp{
		left: auto;
		right: -40px;
		bottom: -5px;
		width: 150px;
		height: 185px;
		background-size: 150px 185px;
	}
	
	#hp-achievements #smp-img{
		left: auto;
		right: 2px;
		bottom: 15px;
		width: 72px;
		height: 148px;
	}
	
	#hp-achievements #smp-img img{
		height: 150px;
		border-radius: 0px 0px 10px 10px;
	}
	
	.news-area ul {
		display: block;
	}
	
	.service-cont h3.service-ttl{
		font-size: 24px;
	}
	
	.service-cont{
		padding: 0px;
	}
	
	.service-cont ul li .img{
		margin-right: 0px;
		min-width: 100%;
		margin-bottom: 20px;
	}
	
	.service-cont ul li{
		padding: 30px;
	}
	
}