@charset "utf-8";

/***********************************************************************************************************************
* 横サイズ925px以下
***********************************************************************************************************************/
@media screen and (max-width: 925px){

/***********************************************************************************************************************
* 基本構造
***********************************************************************************************************************/
	body{
		font-size: 1.4rem;
	}

	.pc{ display:none !important; }
	.sp{ display: block !important; }


	a[href^="tel:"] {
	    pointer-events: all;
	}


/***********************************************************************************************************************
* パーツ
***********************************************************************************************************************/
	/*見出し*/
	.headline-lg .title {
	    font-size: 2.6rem;
	}
	.headline-m {
	    font-size: 2rem;
	}


	header{
		display: block;
		height:80px;
		padding: 0;
	}

	header nav {
		position: absolute;
		top:60px;
		display:none;
		width: 100%;
		margin:0;
		padding: 0;
	    overflow: auto;
		-webkit-overflow-scrolling: touch;
		-webkit-transition: all 0.3s ease;
	    -moz-transition: all 0.3s ease;
	    -ms-transition: all 0.3s ease;
	    -o-transition: all 0.3s ease;
	    transition: all 0.3s ease;
	}

	body header nav.block {
		display: block;
		opacity: 0;
	}

	body header nav.block.active {
		opacity: 1;
	}

	header nav .menu{
		display: block;
		width: 100%;
		margin-top:0px;
		padding: 30px 15px 20px;
		background:#eeeeee;
	}

	header nav .menu>li{
		text-align: left;
		display: block;
		margin:0 auto 10px;
		padding: 0;
	}

	header nav .menu>li>a{
		-webkit-border-radius: 10px;
		border-radius: 10px;
		display: block;
		background: #fff;
		margin:0;
		font-size: 1.6rem;
		padding: 7px 10px;
	}


	header nav .menu>li>a>span{
		font-size: 1.3rem;
		line-height: 1.3em;
	}

	header nav .menu>li>a>em {
	    font-size: 1.6rem;
		line-height: 1.3em;
	}


	header .logo {
		padding: 15px 0 0 25px;
	    width: 100%;
	}
	header .logo a{
		display: inline-block;
		max-width: 185px;
	}

	header .info-box {
	    position: static;
	    width: 100%;
	    max-width: unset;
	    padding: 10px 20px;
	    background: #fb8f44;
	    color:#fff;

	}

	header nav .info-box .headding{
		text-align: center;
		margin:0 auto;
	}
	header nav .info-box a{
		background-color :#fb8f44;
    	padding-left: 62px;
    	line-height: 40px;
    	height: 40px;
    	font-size: 2.4rem;
    	display: block;
    	margin:0 auto;
	}

	header .phone{
		position: fixed;
		right: 55px;
		height: 37px;
		width: 37px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		top:18px;
		background: #eb6100 url(../img/tel.png) center center no-repeat;
		-webkit-background-size:20px auto; 
		background-size:20px auto;
		z-index: 11;
		display: block;
	}



	body header #menu-button {
		position: absolute;
		display: block;
		right: 10px;
	    top: 20%;
	    width: 38px;
	    height: 38px;
	    cursor: pointer;
	    z-index: 10009;
	    margin-top: 2px;
	    -webkit-transition: all 0.3s ease;
	    transition: all 0.3s ease;
    	border:1px solid #d5d5d5;
    	-webkit-border-radius: 5px;
    	border-radius: 5px;
	}

		body header #menu-button>div{
			width: 16px;
			height: 1px;
			background: #eb6100;
			position: absolute;
			-webkit-transition: all .5s;
			   -moz-transition: all .5s;
			    -ms-transition: all .5s;
			     -o-transition: all .5s;
			        transition: all .5s;
		}
			body header.on #menu-button>div{
				background: #eb6100;
			}

			body header.block #menu-button>div {
			    background: #eb6100;
			}

		body header #menu-button>div:nth-child(1){
			top: 11px;
			left: 29%;
			-webkit-transform: translate(0%,0%);
			   -moz-transform: translate(0%,0%);
			    -ms-transform: translate(0%,0%);
			     -o-transform: translate(0%,0%);
			        transform: translate(0%,0%);
		}

		body header #menu-button.active>div{
			width: 20px;
			height: 1px;
		}

			body header #menu-button.active>div:nth-child(1) {
				top: 50%;
				left: 26%;
				-webkit-transform: translate(-5%,-50%) rotate(45deg);
				   -moz-transform: translate(-5%,-50%) rotate(45deg);
				    -ms-transform: translate(-5%,-50%) rotate(45deg);
				     -o-transform: translate(-5%,-50%) rotate(45deg);
				        transform: translate(-5%,-50%) rotate(45deg);
			}
		body header #menu-button>div:nth-child(2){
			top: 50%;
			left: 29%;
		}
			body header #menu-button.active>div:nth-child(2) {
				opacity: 0;
			}
		body header #menu-button>div:nth-child(3){
		    top: 25px;
		    left: 29%;
			-webkit-transform: translate(0%,0%);
			   -moz-transform: translate(0%,0%);
			    -ms-transform: translate(0%,0%);
			     -o-transform: translate(0%,0%);
			        transform: translate(0%,0%);
		}
			body header #menu-button.active>div:nth-child(3) {
				top: 50%;
				left: 26%;
				-webkit-transform: translate(-5%,-50%) rotate(-45deg);
				   -moz-transform: translate(-5%,-50%) rotate(-45deg);
				    -ms-transform: translate(-5%,-50%) rotate(-45deg);
				     -o-transform: translate(-5%,-50%) rotate(-45deg);
				        transform: translate(-5%,-50%) rotate(-45deg);
			}


	/**/

	footer .footer-block{
		display: block;
		padding: 30px 25px;
	}

	footer .footer-block .logo-box {
	    width: 30%;
        margin-left: -10px;
	}

@media screen and (max-width: 725px){
	footer .footer-block .logo-box {
	    width: 290px;
	}    
}

	footer .footer-block .adrs-box {
	    width: 100%;
	    margin-left: 10px;
	}

	footer .footer-block .adrs-box address {
	    margin-top: 15px;
	}
	footer .copyright{
		font-size: 1rem;
	}
	footer #pagetop{
		top:-37px;
	}

	footer #pagetop a {
	    width: 36px;
	    height: 36px;
	}
	footer #pagetop a::after {
		margin-top:-1px;
	    right: 11px;
	    width: 12px;
	    height: 12px;
	}

/************************************************************
* トップページ
*************************************************************/



	/**/

	.main,
	.top-main {
		padding-top: 60px;
	}

	/*メインヴィジュアル*/
	.main-slider .txt-layer {
	    font-size:1.8rem ;
	}


	.top-service .top-service-title {
	    font-size: 2.8rem;
	}
	.top-service .top-service-exp {
	    font-size: 1.8rem;
	}
	.service-items>li{
		width: 135px;
		height: 135px;
    	font-size: 1.8rem;
	    margin-bottom: 1em;
	}

	.top-section-block{
		display: block;
	}

	.to-section-block .headline-lg{
	    margin-bottom: 30px;
	}

	.top-section-block>.top-greetings,
	.top-section-block>.top-about {
	    width: 100%;
	}

	.to-section-block {
	    max-width: 1100px;
	    width: 100%;
	    margin: 0 auto;
	    padding: 2em 5%;
	    background: #fff;
	}

	.to-section-block{
		display: block;
	}

	.to-section-block .headline-lg {
	    width: 100%;
	    text-align: center;
	}
	.to-section-block .txt-box {
	    width: 100%;
	}
	.to-section-block {
		padding: 1.5em 5%;
	}

	.news-block>article {
		display: block;
	}

	.news-block>article time{
		display: block;
		margin-bottom: 5px;
	}
	.news-block>article p {
	    width: 100%;
	}

	.contact-block{
		display: block;
	}
	
	.top-section-block2 {
	    padding: 2.5em 6% 4em;
	    background: #eeeeee;
	}



/************************************************************
* 下層ページ
*************************************************************/
	.main-contents {
	    padding-top: 40px;
	}

	.main-visual .txt-layer {
	    position: absolute;
	    left: 20px;
	    bottom: 15px;
	    color: #fff;
	}




	.main-visual .txt-layer .en {
	    font-size: 3.6rem;
	}
	.main-visual .txt-layer .jp {
	    font-size: 1.4rem;
	}


/*****************
ごあいさつ
******************/
	#greetings .writing p{
		line-height: 1.5em;
	}
	#greetings .writing .author img{
		width: 110px;
	}

	#greetings .eight-words{
		padding-top: 40px;
	}
	#greetings .eight-words .title{
		margin-bottom: 1.5em;
	}
	#greetings .eight-words .title img{
		width: 120px;
	}

	#greetings .eight-words .picture{
		width: 100%;
		display: block;
		-webkit-background-size: 100% auto;
		background-size: 100% auto;
		background-position: center 100%;
	}
	#greetings .eight-words .picture .inner{
		padding: 0 5% 20%;
	}



/*****************
サービス
******************/

	#service .section-headding {
	    padding-top: 2em;
	    padding-bottom: 0.5em;
	    margin-bottom: 3em;
	}


	#service .section-headding .service-title{
		font-size: 2.4rem;
		margin: 0.8em 0;
	}

	#service .section-headding .mark img{
		width: 64px;
	}

	#service .competence {
	    display: block;
	    margin: 2em 0 3em;
	}

	#service .competence .box{
		width: 100%;
	}

	#service .competence .box .title {
	    padding: 1.6em 1em 2em;
	    text-align: center;
	}

	#service .competence .box .title .en{
		font-size: 2.8rem;
	}

	#service .competence .box .title .jp{
		font-size: 2.8rem;
	}

	#service .competence .box p {
	    padding: 1.5em 7% 2em;
	}

	#service .column {
	    padding-top: 1.5em;
	    margin-bottom: 30px;
	}

	#service .column-wrap{
		padding: 0 6%;
	}

	#service .column .column-title {
	    padding-left: 3em;
	    padding-bottom: 1em;
	    margin-right: 30px;
	    display: block;
	}

	#service .column .column-title .en{
		font-size: 5rem;
		margin-right: 0em;
		display:block;
	}
	#service .column .column-title .jp{
		font-size: 2rem;
	}

	#service .column .inner {
	    padding: 1.5em 6% 2em;
	}

	.eight-service {
	    padding-top: 0em;
	}

	.eight-service .title{
		font-size: 2.5rem;
	    margin-bottom: 1.4em;
	}


	.drw-area{
		margin:0 auto 72px;
	}

	.drw-area .drw-block{
		margin-bottom: 1px;
	}

	.drw-area .drw-block .drw-head{
		position: relative;
		cursor: pointer;
		padding:0.7em 1.5em;
		font-size: 2rem;
	}

	.drw-area .drw-block .drw-head::after{
		right:20px;
		width: 12px;
		height: 12px;
	}

	.drw-area .drw-block .drw-head.open::after{
		margin-top: -9px;
		width: 12px;
		height: 12px;
		right:20px;
	}

	.drw-area .drw-block .drw-box{
		padding: 1.5em 5%;
	}
	.drw-area .drw-block .drw-box .inner-conts{
		max-width: 830px;
		margin:0 auto;
	}

	.drw-area .drw-block .drw-box .inner-conts p {
	    margin-bottom: 1.5em;
	}

	.drw-area .drw-block .drw-box .detail-block{
		display: block;
	}
	.drw-area .drw-block .drw-box .detail-block .head-box{
		width: 100%;
		padding-bottom: 1em;
		margin-bottom:  1em;
		border-right:none;
		border-bottom: 1px solid #00739e;

	}
	.drw-area .drw-block .drw-box .detail-block .list-box{

		width: 100%;
		padding-left:0em;
	}

	.drw-area .drw-block .drw-box .detail-block2{
		display: block;
	}
	.drw-area .drw-block .drw-box .detail-block2 .txt-box{
		width:100%;
		padding-right: 0em;
	}
	.drw-area .drw-block .drw-box .detail-block2 .img-box{
		width: 100%;
		text-align: center;
		margin-top: 1.5em;
	}
	.drw-area .drw-block .drw-box .detail-block2 .img-box img{
		max-width: 60%;
	}

	.drw-area .drw-block .drw-box .lg-img{
		margin-top: 1.5em;
	}

	.drw-area .drw-block .drw-box .detail-block3{
		display: block;
	}

	.drw-area .drw-block .drw-box .detail-block3 .txt-box{
		width: 100%;
		padding-right: 0em;
	}
	.drw-area .drw-block .drw-box .detail-block3 .img-box{
		width: 100%;

	}


	/*****************
	法人概要
	******************/

	.table-area .iframe-block {
	    position: relative;
	    width: 100%;
	    margin-top: 1em;
	    padding-top: 79.3%;
	    margin-bottom: 10px;
	}
	
	#about .company-info-section{
		margin-bottom: 4em;
	}
	#about .company-history-section{
		margin-bottom: 5em;
	}
	#about .headline-m{
		margin-bottom: 1.5em;
	}

	#about .table-area .person-block{
		display: block;
	}
	#about .table-area .person-block>.txt-box{
		width: 100%;
	}
		
	#about .table-area .person-block>.img-box{
		width: 100%;
		margin-bottom: 15px;
		margin-top: 20px;
		text-align: center;
	}

	#about .table-area .person-block .name{
		font-size: 1.8rem;
		padding-top: 10px;
		margin-bottom: 0.6em;
	}

	#about .table-area .person-block .name>span{
		font-size: 1.4rem;
		margin-left: 0.5em;
	}

	#about .table-area .person-block .profile{
		position: relative;
	}

	#about .table-area .person-block .profile dt{
		position:relative;
	}
	#about .table-area .person-block .profile dt::after{
		content:"";
		position: absolute;
		display: block;
		width: 100%;
		height: 1px;
		top:50%;
		left:0;
		background: #000;
		z-index: 1;
	}
	#about .table-area .person-block .profile dt>span{
		position: relative;
		display: inline-block;
		background: #f5f5f5;
		z-index: 2;
		padding-right: 10px;
		font-size: 1.6rem;
		margin-bottom: 0.5em;
	}
	#about .table-area .person-block ul>li{
		line-height: 1.6em;
	}

}

@media screen and (max-width: 425px){
	.top-service{
		background : url(/images/img1_sp.jpg?3) center center no-repeat !important;
	}
}
/***********************************************************************************************************************
* 横サイズ374px以下
***********************************************************************************************************************/
@media screen and (max-width: 374px){

	header nav .info-box .headding{
		text-align: left;
	}


	footer .footer-block .adrs-box address,
	footer .footer-block .adrs-box p{
	    font-size: 11px;
	}


	.top-service .top-service-title {
	    font-size: 2.5rem;
	}
	.top-service .top-service-exp {
	    font-size: 1.6rem;
	}


	.service-items>li {
	    width: 105px;
	    height: 105px;
	}

	.contact-block .info-box a {
	    font-size: 2.7rem;
	}
	.contact-block .exp-box dl>dd {
    	font-size: 1.6rem;
	}


		/*メインヴィジュアル*/
	.main-slider .txt-layer {
	    font-size:1.6rem ;
	}

	.headline-m {
	    font-size: 1.7rem;
	}

	.main-visual .txt-layer{
		bottom: 10px;
	}

	.main-visual .txt-layer .en {
	    font-size: 3rem;
	}


	#service .section-headding .service-title {
	    font-size: 2.1rem;
	}

	#service .competence .box .title .jp {
	    font-size: 2.6rem;
	}

	
	.eight-service .title {
	    font-size: 2rem;
	}



}